/* =========================================================================
   Gestionale Marketing Befed — foglio di stile
   Grafica: Baligo Marketing Dashboard (sezioni) + SaaS CRM (dashboard/report)
   Colore primario: rosso Befed #db291c. Accenti dalle grafiche Figma.
   Scritto a mano: nessun build step, nessuna dipendenza npm.
   ========================================================================= */

/* ---------- 1. Token ---------- */
:root {
  /* Marchio */
  --rosso:          #db291c;
  --rosso-scuro:    #a81d13;
  --rosso-vivo:     #e8493c;
  --rosso-chiaro:   #fde9e7;
  --rosso-tenue:    #fdf4f3;

  /* Accenti (dalle grafiche Figma) */
  --blu:            #3b82f6;  --blu-tenue:    #eaf2fe;
  --verde:          #10b981;  --verde-tenue:  #e6f7f1;
  --arancio:        #f59e0b;  --arancio-tenue:#fef4e5;
  --viola:          #8b5cf6;  --viola-tenue:  #f2edfe;
  --ciano:          #14b8a6;  --ciano-tenue:  #e4f7f5;
  --rosa:           #ec4899;  --rosa-tenue:   #fdeaf4;

  /* Semantici */
  --ok:             #0f9d58;  --ok-tenue:     #e7f6ee;
  --attenzione:     #d97706;  --attenzione-tenue: #fdf3e3;
  --pericolo:       #d92d20;  --pericolo-tenue:   #fdeceb;
  --info:           #2563eb;  --info-tenue:   #eaf1fe;

  /* Superfici e testo */
  --fondo:          #f6f7f9;
  --carta:          #ffffff;
  --carta-alt:      #fafbfc;
  --bordo:          #e8eaed;
  --bordo-forte:    #d6dae0;
  --testo:          #1a1d21;
  --testo-medio:    #5b6472;
  --testo-tenue:    #8b95a3;

  /* Forma */
  --r-s:  6px;
  --r:    10px;
  --r-l:  14px;
  --r-xl: 18px;
  --ombra:      0 1px 2px rgba(16,24,40,.05);
  --ombra-m:    0 4px 12px rgba(16,24,40,.07);
  --ombra-l:    0 12px 32px rgba(16,24,40,.12);

  --sidebar-w:  248px;
  --header-h:   68px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-t: 'Poppins', var(--font);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--testo);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-t); font-weight: 600; margin: 0; letter-spacing: -.01em; }
h1 { font-size: 24px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }

a { color: var(--rosso); text-decoration: none; }
a:hover { text-decoration: underline; }

p { margin: 0 0 12px; }
small { font-size: 12px; }

/* ---------- 3. Struttura ---------- */
.guscio { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--carta);
  border-right: 1px solid var(--bordo);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  overflow-y: auto;
}

.sidebar__logo {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  border-bottom: 1px solid var(--bordo);
  flex: 0 0 auto;
}
.sidebar__logo img { height: 26px; width: auto; }
.sidebar__logo span {
  font-family: var(--font-t);
  font-weight: 600;
  font-size: 13px;
  color: var(--testo-medio);
  line-height: 1.15;
}

.sidebar__gruppo {
  padding: 18px 14px 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.sidebar nav { padding: 6px 10px 20px; flex: 1 1 auto; }

.voce {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  margin-bottom: 2px;
  border-radius: var(--r);
  color: var(--testo-medio);
  font-weight: 500;
  font-size: 13.5px;
  transition: background .13s, color .13s;
}
.voce:hover { background: var(--carta-alt); color: var(--testo); text-decoration: none; }
.voce.attiva { background: var(--rosso-tenue); color: var(--rosso); font-weight: 600; }
.voce.attiva .ico { color: var(--rosso); }
.voce .ico { width: 18px; height: 18px; flex: 0 0 18px; color: var(--testo-tenue); }
.voce__pillola {
  margin-left: auto;
  background: var(--rosso);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
}

.sidebar__pie {
  border-top: 1px solid var(--bordo);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.avatar {
  width: 34px; height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: var(--rosso);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 600; font-size: 13px;
  font-family: var(--font-t);
}
.sidebar__pie .nome { font-weight: 600; font-size: 13px; line-height: 1.2; }
.sidebar__pie .ruolo { font-size: 11px; color: var(--testo-tenue); text-transform: capitalize; }

.principale {
  flex: 1 1 auto;
  margin-left: var(--sidebar-w);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.header {
  height: var(--header-h);
  background: var(--carta);
  border-bottom: 1px solid var(--bordo);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 26px;
  position: sticky;
  top: 0;
  z-index: 30;
}
.header h1 { font-size: 20px; }
.header__sottotitolo { font-size: 12.5px; color: var(--testo-tenue); margin-top: -2px; }
.header__azioni { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.contenuto { padding: 22px 26px 44px; flex: 1 1 auto; }

.burger { display: none; }

/* ---------- 4. Griglie ---------- */
.griglia { display: grid; gap: 16px; }
.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-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.g-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.sp-2 { grid-column: span 2; }
.sp-3 { grid-column: span 3; }
.sp-4 { grid-column: span 4; }

/* ---------- 5. Carte ---------- */
.carta {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--r-l);
  box-shadow: var(--ombra);
}
.carta__testa {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--bordo);
}
.carta__testa h2, .carta__testa h3 { margin: 0; }
.carta__testa .azioni { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.carta__corpo { padding: 18px; }
.carta__corpo--stretto { padding: 12px 18px; }
.carta__pie {
  padding: 12px 18px;
  border-top: 1px solid var(--bordo);
  background: var(--carta-alt);
  border-radius: 0 0 var(--r-l) var(--r-l);
  font-size: 12.5px;
  color: var(--testo-medio);
}

/* ---------- 6. KPI ---------- */
.kpi {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--r-l);
  padding: 17px 18px;
  box-shadow: var(--ombra);
  position: relative;
  min-height: 118px;
  display: flex;
  flex-direction: column;
}
.kpi__etichetta {
  font-size: 12.5px;
  color: var(--testo-tenue);
  font-weight: 500;
  padding-right: 48px;
}
.kpi__valore {
  font-family: var(--font-t);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 5px 0 auto;
  line-height: 1.15;
}
.kpi__valore.piccolo { font-size: 21px; }
.kpi__badge {
  position: absolute;
  top: 15px; right: 16px;
  width: 40px; height: 40px;
  border-radius: 11px;
  display: grid; place-items: center;
  color: #fff;
}
.kpi__badge svg { width: 20px; height: 20px; }
.kpi__badge.b-rosso  { background: linear-gradient(135deg, var(--rosso-vivo), var(--rosso)); }
.kpi__badge.b-blu    { background: linear-gradient(135deg, #60a5fa, var(--blu)); }
.kpi__badge.b-verde  { background: linear-gradient(135deg, #34d399, var(--verde)); }
.kpi__badge.b-arancio{ background: linear-gradient(135deg, #fbbf24, var(--arancio)); }
.kpi__badge.b-viola  { background: linear-gradient(135deg, #a78bfa, var(--viola)); }
.kpi__badge.b-ciano  { background: linear-gradient(135deg, #2dd4bf, var(--ciano)); }
.kpi__pie { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--testo-tenue); margin-top: 8px; }

.delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
}
.delta.su   { background: var(--ok-tenue);      color: var(--ok); }
.delta.giu  { background: var(--pericolo-tenue);color: var(--pericolo); }
.delta.pari { background: #eef0f3;              color: var(--testo-medio); }

/* ---------- 7. Tabelle ---------- */
.tabella-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.tab { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tab thead th {
  background: var(--carta-alt);
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  padding: 10px 14px;
  border-bottom: 1px solid var(--bordo);
  white-space: nowrap;
}
table.tab thead th a { color: inherit; }
table.tab thead th a:hover { color: var(--rosso); text-decoration: none; }
table.tab tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--bordo);
  vertical-align: middle;
}
table.tab tbody tr:last-child td { border-bottom: 0; }
table.tab tbody tr:hover { background: var(--carta-alt); }
table.tab .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tab .cen { text-align: center; }
table.tab .forte { font-weight: 600; }
table.tab tfoot td {
  padding: 11px 14px;
  border-top: 2px solid var(--bordo-forte);
  font-weight: 600;
  background: var(--carta-alt);
}
.tab--compatta tbody td, .tab--compatta thead th { padding: 7px 10px; }

.vuoto {
  padding: 40px 20px;
  text-align: center;
  color: var(--testo-tenue);
}
.vuoto svg { width: 38px; height: 38px; opacity: .35; margin-bottom: 8px; }

/* ---------- 8. Etichette e stati ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eef0f3;
  color: var(--testo-medio);
  white-space: nowrap;
}
.tag.t-ok        { background: var(--ok-tenue);        color: var(--ok); }
.tag.t-attesa    { background: var(--attenzione-tenue);color: var(--attenzione); }
.tag.t-male      { background: var(--pericolo-tenue);  color: var(--pericolo); }
.tag.t-info      { background: var(--info-tenue);      color: var(--info); }
.tag.t-viola     { background: var(--viola-tenue);     color: var(--viola); }
.tag.t-ciano     { background: var(--ciano-tenue);     color: var(--ciano); }
.tag.t-rosso     { background: var(--rosso-chiaro);    color: var(--rosso); }
.tag.t-neutro    { background: #eef0f3;                color: var(--testo-medio); }

.punto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 8px; }
.punto.p-verde { background: var(--ok); }
.punto.p-giallo{ background: var(--attenzione); }
.punto.p-rosso { background: var(--pericolo); }
.punto.p-grigio{ background: var(--testo-tenue); }

.pallino-cat { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: 0 0 9px; }

/* ---------- 9. Bottoni ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 15px;
  border-radius: var(--r);
  border: 1px solid transparent;
  background: var(--carta);
  color: var(--testo-medio);
  cursor: pointer;
  white-space: nowrap;
  transition: background .13s, border-color .13s, color .13s, box-shadow .13s;
  text-decoration: none;
  line-height: 1.3;
}
.btn:hover { text-decoration: none; }
.btn svg { width: 16px; height: 16px; }

.btn--primario { background: var(--rosso); color: #fff; box-shadow: 0 1px 2px rgba(219,41,28,.25); }
.btn--primario:hover { background: var(--rosso-scuro); color: #fff; }

.btn--contorno { border-color: var(--bordo-forte); color: var(--testo-medio); background: var(--carta); }
.btn--contorno:hover { border-color: var(--testo-tenue); color: var(--testo); background: var(--carta-alt); }

.btn--fantasma { background: transparent; color: var(--testo-medio); }
.btn--fantasma:hover { background: var(--carta-alt); color: var(--testo); }

.btn--pericolo { background: var(--pericolo); color: #fff; }
.btn--pericolo:hover { background: #b42318; color: #fff; }

.btn--piccolo { padding: 5px 10px; font-size: 12px; border-radius: var(--r-s); }
.btn--piccolo svg { width: 14px; height: 14px; }
.btn--grande { padding: 11px 22px; font-size: 14px; }
.btn--blocco { width: 100%; }
.btn[disabled], .btn.disabilitato { opacity: .5; pointer-events: none; }

.btn-gruppo { display: inline-flex; border: 1px solid var(--bordo-forte); border-radius: var(--r); overflow: hidden; }
.btn-gruppo .btn { border-radius: 0; border: 0; border-right: 1px solid var(--bordo); background: var(--carta); }
.btn-gruppo .btn:last-child { border-right: 0; }
.btn-gruppo .btn.attivo { background: var(--rosso-tenue); color: var(--rosso); }

/* ---------- 10. Form ---------- */
.campo { margin-bottom: 15px; }
.campo > label, .etichetta {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--testo-medio);
  margin-bottom: 5px;
}
.campo .aiuto { font-size: 11.5px; color: var(--testo-tenue); margin-top: 4px; }
.campo.obbligatorio > label::after { content: ' *'; color: var(--rosso); }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=time], input[type=search], input[type=tel], input[type=url],
select, textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--testo);
  background: var(--carta);
  border: 1px solid var(--bordo-forte);
  border-radius: var(--r);
  padding: 8px 11px;
  transition: border-color .13s, box-shadow .13s;
}
input:focus, select:focus, textarea:focus {
  outline: 0;
  border-color: var(--rosso);
  box-shadow: 0 0 0 3px var(--rosso-chiaro);
}
input[disabled], select[disabled], textarea[disabled] { background: var(--carta-alt); color: var(--testo-tenue); }
textarea { min-height: 84px; resize: vertical; }
select[multiple] { min-height: 160px; padding: 6px; }

.inline-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.inline-check input { width: auto; margin: 0; accent-color: var(--rosso); }

.riga-campi { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.riga-campi--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.riga-campi--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.prefisso-euro { position: relative; }
.prefisso-euro input { padding-left: 27px; }
.prefisso-euro::before {
  content: '€';
  position: absolute; left: 11px; top: 50%;
  transform: translateY(-50%);
  color: var(--testo-tenue);
  font-size: 13.5px;
  pointer-events: none;
}

.errore-campo { color: var(--pericolo); font-size: 12px; margin-top: 4px; }
input.in-errore, select.in-errore { border-color: var(--pericolo); }

fieldset { border: 0; padding: 0; margin: 0 0 20px; }
fieldset > legend {
  font-family: var(--font-t);
  font-size: 13px;
  font-weight: 600;
  color: var(--testo);
  padding: 0 0 10px;
  margin-bottom: 4px;
  width: 100%;
  border-bottom: 1px solid var(--bordo);
}

/* ---------- 10b. Lista di scelta (confronto locali) ---------- */
.lista-scelta {
  border: 1px solid var(--bordo-forte);
  border-radius: var(--r);
  max-height: 232px;
  overflow-y: auto;
  margin-top: 6px;
  background: var(--carta);
}
.voce-scelta {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 11px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--bordo);
}
.voce-scelta:last-child { border-bottom: 0; }
.voce-scelta:hover { background: var(--carta-alt); }
.voce-scelta input { width: auto; margin: 0; accent-color: var(--rosso); flex: 0 0 auto; }
.voce-scelta .nome { font-weight: 500; }
.voce-scelta:has(input:checked) { background: var(--rosso-tenue); }
.voce-scelta:has(input:checked) .nome { color: var(--rosso); font-weight: 600; }

/* ---------- 11. Filtri ---------- */
.filtri {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--r-l);
  padding: 14px 16px;
  margin-bottom: 16px;
  box-shadow: var(--ombra);
}
.filtri form { display: flex; flex-wrap: wrap; gap: 11px; align-items: flex-end; }
.filtri .campo { margin: 0; min-width: 140px; flex: 0 1 auto; }
.filtri .campo > label { font-size: 11px; margin-bottom: 3px; }
.filtri .campo input, .filtri .campo select { padding: 6px 10px; font-size: 13px; }
.filtri .azioni-filtri { display: flex; gap: 8px; margin-left: auto; }

.barra-risultati {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--testo-medio);
  flex-wrap: wrap;
}
.barra-risultati .conteggio { font-weight: 600; color: var(--testo); }
.barra-risultati .a-destra { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.chip-filtro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--rosso-tenue);
  color: var(--rosso);
  border-radius: 999px;
  padding: 3px 6px 3px 10px;
  font-size: 12px;
  font-weight: 500;
}
.chip-filtro a { color: var(--rosso); display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; }
.chip-filtro a:hover { background: var(--rosso); color: #fff; text-decoration: none; }

/* ---------- 12. Messaggi ---------- */
.flash { margin-bottom: 16px; display: flex; flex-direction: column; gap: 9px; }
.msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 15px;
  border-radius: var(--r);
  font-size: 13.5px;
  border: 1px solid;
}
.msg svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; }
.msg .chiudi { margin-left: auto; cursor: pointer; opacity: .6; }
.msg .chiudi:hover { opacity: 1; }
.msg--ok     { background: var(--ok-tenue);         border-color: #b7e4cb; color: #0a6b3c; }
.msg--errore { background: var(--pericolo-tenue);   border-color: #f6c9c5; color: #99221a; }
.msg--avviso { background: var(--attenzione-tenue); border-color: #f5d9a8; color: #9a5b06; }
.msg--info   { background: var(--info-tenue);       border-color: #c3d6fb; color: #1d4ed8; }

/* ---------- 13. Paginazione ---------- */
.paginazione { display: flex; gap: 5px; align-items: center; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.paginazione a, .paginazione span {
  min-width: 32px; height: 32px;
  display: grid; place-items: center;
  padding: 0 9px;
  border-radius: var(--r-s);
  border: 1px solid var(--bordo);
  font-size: 13px;
  color: var(--testo-medio);
  background: var(--carta);
}
.paginazione a:hover { border-color: var(--rosso); color: var(--rosso); text-decoration: none; }
.paginazione .corrente { background: var(--rosso); border-color: var(--rosso); color: #fff; font-weight: 600; }
.paginazione .salto { border: 0; background: transparent; }

/* ---------- 14. Tab ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--bordo); margin-bottom: 18px; overflow-x: auto; }
.tabs a {
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--testo-tenue);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.tabs a:hover { color: var(--testo); text-decoration: none; }
.tabs a.attiva { color: var(--rosso); border-bottom-color: var(--rosso); }

/* ---------- 15. Modale ---------- */
.modale-fondo {
  position: fixed; inset: 0;
  background: rgba(16,24,40,.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modale-fondo.aperta { display: flex; }
.modale {
  background: var(--carta);
  border-radius: var(--r-xl);
  box-shadow: var(--ombra-l);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.modale--larga { max-width: 820px; }
.modale__testa { padding: 18px 22px; border-bottom: 1px solid var(--bordo); display: flex; align-items: center; gap: 12px; }
.modale__testa .chiudi { margin-left: auto; cursor: pointer; color: var(--testo-tenue); }
.modale__corpo { padding: 20px 22px; overflow-y: auto; }
.modale__pie { padding: 15px 22px; border-top: 1px solid var(--bordo); display: flex; gap: 9px; justify-content: flex-end; background: var(--carta-alt); border-radius: 0 0 var(--r-xl) var(--r-xl); }

/* ---------- 16. Grafici ---------- */
.grafico { position: relative; width: 100%; }
.grafico canvas { max-width: 100%; }
.h-200 { height: 200px; } .h-240 { height: 240px; }
.h-280 { height: 280px; } .h-320 { height: 320px; }

.legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--testo-medio); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---------- 17. Matrice materiale ---------- */
.matrice { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
.matrice th, .matrice td { border-bottom: 1px solid var(--bordo); padding: 9px 10px; }
.matrice thead th {
  background: var(--carta-alt);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--testo-tenue); font-weight: 600;
  position: sticky; top: 0; z-index: 2;
}
.matrice tbody th.locale {
  text-align: left; font-weight: 600; white-space: nowrap;
  position: sticky; left: 0; background: var(--carta); z-index: 1;
  border-right: 1px solid var(--bordo);
}
.matrice tbody tr:hover th.locale, .matrice tbody tr:hover td { background: var(--carta-alt); }
.cella-mat { text-align: center; cursor: pointer; font-variant-numeric: tabular-nums; }
.cella-mat:hover { outline: 2px solid var(--rosso); outline-offset: -2px; }
.cella-mat.c-ok      { background: var(--ok-tenue); }
.cella-mat.c-arrivo  { background: var(--attenzione-tenue); }
.cella-mat.c-manca   { background: var(--pericolo-tenue); color: #99221a; font-weight: 600; }
.cella-mat.c-zero    { color: var(--testo-tenue); }
.cella-mat.selezionata { outline: 2px solid var(--rosso); outline-offset: -2px; background: var(--rosso-chiaro); }
.cella-mat .frazione { font-size: 13px; }
.cella-mat .vecchia { display: block; font-size: 10px; color: var(--attenzione); font-weight: 600; }

/* ---------- 18. Calendario ---------- */
.cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal th {
  padding: 9px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--testo-tenue); font-weight: 600; border-bottom: 1px solid var(--bordo);
}
.cal td {
  border: 1px solid var(--bordo);
  vertical-align: top;
  height: 118px;
  padding: 5px;
  position: relative;
}
.cal td.fuori { background: var(--carta-alt); }
.cal td.oggi { background: var(--rosso-tenue); }
.cal .giorno-num { font-size: 12px; font-weight: 600; color: var(--testo-medio); }
.cal td.oggi .giorno-num { color: var(--rosso); }
.cal .fatt-giorno { font-size: 10.5px; color: var(--testo-tenue); float: right; font-variant-numeric: tabular-nums; }
.cal .blocchi { margin-top: 3px; display: flex; flex-direction: column; gap: 2px; }
.blocco-att {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: var(--r-s);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  display: block;
}
.blocco-att:hover { text-decoration: none; filter: brightness(.92); color: #fff; }
.blocco-att.continua-sx { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.blocco-att.continua-dx { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cal .altro { font-size: 10.5px; color: var(--testo-tenue); padding-left: 4px; }

/* ---------- 18b. Settimana in dashboard ---------- */
.settimana {
  display: grid;
  grid-template-columns: repeat(7, minmax(146px, 1fr));
  gap: 1px;
  background: var(--bordo);
  border-top: 1px solid var(--bordo);
}
.settimana__giorno { background: var(--carta); display: flex; flex-direction: column; min-height: 150px; }
.settimana__giorno.oggi { background: var(--rosso-tenue); }
.settimana__testa {
  display: flex; align-items: baseline; gap: 6px;
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--bordo);
}
.settimana__testa .dow {
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--testo-tenue);
}
.settimana__testa .num { font-family: var(--font-t); font-size: 15px; font-weight: 600; }
.settimana__giorno.oggi .dow,
.settimana__giorno.oggi .num { color: var(--rosso); }
.settimana__corpo { padding: 6px; display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; }

.evento-sett {
  display: flex; gap: 7px; align-items: stretch;
  padding: 4px 6px;
  border-radius: var(--r-s);
  background: var(--carta-alt);
  border: 1px solid var(--bordo);
  color: var(--testo);
  text-decoration: none;
  line-height: 1.25;
}
.evento-sett:hover { background: var(--carta); border-color: var(--bordo-forte); text-decoration: none; }
.evento-sett .barra-cat { width: 3px; border-radius: 2px; flex: 0 0 3px; }
.evento-sett .testo { min-width: 0; display: flex; flex-direction: column; }
.evento-sett .titolo {
  font-size: 11.5px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.evento-sett .titolo b { color: var(--testo-tenue); font-weight: 600; }
.evento-sett .locale {
  font-size: 10.5px; color: var(--testo-tenue);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 900px) {
  .settimana { grid-template-columns: repeat(7, minmax(132px, 1fr)); }
}

/* ---------- 18c1. Filtri in linea (sopra a un riquadro) ---------- */
.filtri-inline {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.filtri-inline label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--testo-medio);
  margin: 0;
  white-space: nowrap;
}
/* I select nascono a larghezza piena: qui devono stare in riga. */
.filtri-inline select {
  width: auto;
  padding: 6px 10px;
  font-size: 13px;
}

/* ---------- 18c. Classifica prodotti (dentro le tabelle) ---------- */
.pos-classifica {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--carta-alt);
  border: 1px solid var(--bordo);
  display: inline-grid; place-items: center;
  font-size: 10.5px; font-weight: 600;
  color: var(--testo-medio);
}
tbody tr:nth-child(1) .pos-classifica { background: var(--rosso);        border-color: var(--rosso);        color: #fff; }
tbody tr:nth-child(2) .pos-classifica { background: var(--rosso-chiaro); border-color: var(--rosso-chiaro); color: var(--rosso); }
tbody tr:nth-child(3) .pos-classifica { background: var(--rosso-tenue);  border-color: var(--rosso-chiaro); color: var(--rosso); }

/* Barra sottile sotto al nome: dà il peso senza rubare una colonna. */
.barra-quota {
  display: block;
  height: 3px;
  margin-top: 4px;
  max-width: 190px;
  background: #eef0f3;
  border-radius: 999px;
  overflow: hidden;
}
.barra-quota > i { display: block; height: 100%; border-radius: 999px; }

/* ---------- 19. Pannello laterale ---------- */
.pannello {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 420px;
  max-width: 92vw;
  background: var(--carta);
  box-shadow: var(--ombra-l);
  z-index: 90;
  transform: translateX(100%);
  transition: transform .2s ease;
  display: flex;
  flex-direction: column;
}
.pannello.aperto { transform: none; }
.pannello__testa { padding: 17px 20px; border-bottom: 1px solid var(--bordo); display: flex; align-items: center; gap: 10px; }
.pannello__testa .chiudi { margin-left: auto; cursor: pointer; color: var(--testo-tenue); }
.pannello__corpo { padding: 18px 20px; overflow-y: auto; flex: 1 1 auto; }

/* ---------- 20. Liste descrittive ---------- */
.dati { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: 13.5px; align-items: baseline; }
.dati dt { color: var(--testo-tenue); font-size: 12.5px; }
.dati dd { margin: 0; font-weight: 500; }

.lista-nuda { list-style: none; margin: 0; padding: 0; }
.lista-nuda li {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 0; border-bottom: 1px solid var(--bordo);
}
.lista-nuda li:last-child { border-bottom: 0; }
.lista-nuda .a-destra { margin-left: auto; text-align: right; }

/* ---------- 21. Barra di avanzamento ---------- */
.barra { height: 6px; background: #eef0f3; border-radius: 999px; overflow: hidden; }
.barra > i { display: block; height: 100%; background: var(--rosso); border-radius: 999px; }
.barra > i.ok { background: var(--ok); }
.barra > i.attenzione { background: var(--attenzione); }

/* ---------- 22. Login ---------- */
.login-pagina {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(1100px 520px at 12% -10%, var(--rosso-chiaro) 0%, transparent 62%),
    radial-gradient(900px 480px at 105% 110%, #e8eefb 0%, transparent 58%),
    var(--fondo);
  padding: 24px;
}
.login-carta {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--r-xl);
  box-shadow: var(--ombra-l);
  width: 100%;
  max-width: 412px;
  padding: 36px 34px 30px;
}
.login-carta img { height: 40px; margin-bottom: 22px; }
.login-carta h1 { font-size: 21px; margin-bottom: 4px; }
.login-carta .sotto { color: var(--testo-tenue); font-size: 13.5px; margin-bottom: 24px; }
.login-pie { text-align: center; margin-top: 20px; font-size: 12px; color: var(--testo-tenue); }

/* ---------- 23. Utilita' ---------- */
.tenue   { color: var(--testo-tenue); }
.medio   { color: var(--testo-medio); }
.forte   { font-weight: 600; }
.piccolo { font-size: 12px; }
.num     { font-variant-numeric: tabular-nums; }
.nowrap  { white-space: nowrap; }
.centro  { text-align: center; }
.destra  { text-align: right; }
.c-ok       { color: var(--ok); }
.c-male     { color: var(--pericolo); }
.c-attesa   { color: var(--attenzione); }
.c-rosso    { color: var(--rosso); }
.mt-0 { margin-top: 0 } .mt-1 { margin-top: 8px } .mt-2 { margin-top: 16px } .mt-3 { margin-top: 24px }
.mb-0 { margin-bottom: 0 } .mb-1 { margin-bottom: 8px } .mb-2 { margin-bottom: 16px } .mb-3 { margin-bottom: 24px }
.flex { display: flex; } .flex-col { flex-direction: column; }
.tra-centro { align-items: center; } .gap-1 { gap: 8px } .gap-2 { gap: 16px }
.spinge { margin-left: auto; }
.avvolgi { flex-wrap: wrap; }
.nascosto { display: none !important; }
.solo-lettura-fonte {
  font-size: 11.5px;
  color: var(--testo-tenue);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.solo-lettura-fonte svg { width: 13px; height: 13px; }

/* ---------- 24. Responsive ---------- */
@media (max-width: 1200px) {
  .g-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-2-1, .g-1-2 { grid-template-columns: minmax(0, 1fr); }
  .sp-2, .sp-3, .sp-4 { grid-column: span 1; }
}

@media (max-width: 900px) {
  :root { --sidebar-w: 0px; }
  .sidebar {
    transform: translateX(-260px);
    width: 248px; flex-basis: 248px;
    transition: transform .2s ease;
    box-shadow: var(--ombra-l);
  }
  .sidebar.aperta { transform: none; }
  .principale { margin-left: 0; }
  .burger {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border-radius: var(--r);
    border: 1px solid var(--bordo-forte);
    background: var(--carta);
    cursor: pointer;
    color: var(--testo-medio);
  }
  .header { padding: 0 16px; gap: 12px; }
  .header h1 { font-size: 17px; }
  .contenuto { padding: 16px; }
  .g-3, .g-4, .g-6, .g-2 { grid-template-columns: minmax(0, 1fr); }
  .filtri form { gap: 9px; }
  .filtri .campo { min-width: 132px; flex: 1 1 132px; }
  .filtri .azioni-filtri { margin-left: 0; width: 100%; }
  .cal td { height: 76px; }
  .cal .fatt-giorno { display: none; }
}

@media (max-width: 560px) {
  .kpi { min-height: 100px; padding: 14px 15px; }
  .kpi__valore { font-size: 22px; }
  .modale__pie { flex-direction: column-reverse; }
  .modale__pie .btn { width: 100%; }
  .riga-campi, .riga-campi--2, .riga-campi--3 { grid-template-columns: minmax(0, 1fr); }
  .tabs a { padding: 9px 11px; font-size: 13px; }
}

/* ---------- 25. Stampa ---------- */
@media print {
  .sidebar, .header__azioni, .filtri, .btn, .paginazione, .burger { display: none !important; }
  .principale { margin-left: 0; }
  .carta { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  body { background: #fff; }
}