/* ===================================================================
   REZI CONTACT - design system
   Niente CDN e niente attributi style="..." (la CSP e' 'self'):
   ogni aspetto vive qui dentro.
   =================================================================== */

:root {
  --blu: #2563eb;
  --blu-scuro: #1d4ed8;
  --blu-chiaro: #eff4ff;
  --viola: #7c3aed;
  --viola-chiaro: #f5f0ff;
  --ciano: #0891b2;
  --ciano-chiaro: #ecfbff;
  --verde: #16a34a;
  --verde-chiaro: #eefbf2;
  --rosso: #dc2626;
  --rosso-chiaro: #fef2f2;
  --ambra: #d97706;

  --fondo: #f4f6fb;
  --superficie: #ffffff;
  --bordo: #e5e8f0;
  --bordo-forte: #d3d8e6;
  --testo: #101828;
  --testo-2: #5a6478;
  --testo-3: #8a93a6;

  --sidebar-1: #0c1120;
  --sidebar-2: #151d31;
  --sidebar-testo: #c7cfe2;

  --raggio: 14px;
  --raggio-sm: 10px;
  --ombra: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .12);
  --ombra-forte: 0 24px 60px -24px rgba(16, 24, 40, .35);
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

/* L'attributo hidden deve vincere sempre: senza questa regola un
   "display: block" scritto piu' sotto lo annullerebbe (successo davvero
   con il campo del dial level). */
[hidden] { display: none !important; }

html, body { height: 100%; }

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

h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
svg { width: 20px; height: 20px; fill: currentColor; flex: none; }

/* ------------------------------------------------------------- struttura */
.shell {
  display: grid;
  grid-template-columns: 268px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: linear-gradient(170deg, var(--sidebar-1) 0%, var(--sidebar-2) 100%);
  color: var(--sidebar-testo);
  display: flex;
  flex-direction: column;
  padding: 22px 16px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 6px 22px;
}

.brand-mark {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 19px;
  color: #fff;
  background: linear-gradient(135deg, var(--blu) 0%, var(--viola) 100%);
  box-shadow: 0 6px 18px -6px rgba(37, 99, 235, .8);
}

.brand-mark-lg { width: 52px; height: 52px; font-size: 24px; border-radius: 15px; }

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { color: #fff; letter-spacing: .14em; font-size: 15px; }
.brand-text span { color: #6d7a96; font-size: 10.5px; letter-spacing: .34em; }

.nav { display: flex; flex-direction: column; gap: 4px; flex: 1; overflow-y: auto; }

.nav-label {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #5b6784;
  padding: 18px 10px 6px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--raggio-sm);
  font-size: 14.5px;
  color: var(--sidebar-testo);
  transition: background .15s ease, color .15s ease;
}

.nav-link svg { width: 18px; height: 18px; opacity: .85; }

.nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }

.nav-link.is-active {
  background: linear-gradient(100deg, rgba(37, 99, 235, .28), rgba(124, 58, 237, .18));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(120, 160, 255, .25);
}

.nav-link.is-soon { opacity: .55; cursor: not-allowed; }
.nav-link.is-soon:hover { background: none; color: var(--sidebar-testo); }

.pill {
  margin-left: auto;
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #93a0bd;
}

.sidebar-foot { border-top: 1px solid rgba(255, 255, 255, .07); padding-top: 14px; margin-top: 10px; }

.who { display: flex; align-items: center; gap: 10px; padding: 0 6px 12px; }

.avatar {
  width: 36px; height: 36px;
  border-radius: 11px;
  display: grid; place-items: center;
  font-weight: 700;
  color: #0c1120;
  background: linear-gradient(135deg, #dbeafe, #c7d2fe);
}

.who-text { display: flex; flex-direction: column; min-width: 0; }
.who-text strong { color: #fff; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-text span { color: #6d7a96; font-size: 11.5px; }

/* ----------------------------------------------------------------- main */
.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 34px 18px;
}

.topbar h1 { font-size: 25px; letter-spacing: -.02em; font-weight: 700; }
.sottotitolo { color: var(--testo-2); font-size: 13.5px; margin-top: 3px; }
.topbar-actions { display: flex; gap: 10px; }

.content { padding: 6px 34px 40px; display: flex; flex-direction: column; gap: 20px; }

/* ---------------------------------------------------------------- card */
.card {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}

.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.stat { display: flex; align-items: center; gap: 14px; padding: 18px; }

.stat-icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  display: grid; place-items: center;
}

.stat-icon svg { width: 22px; height: 22px; }
.stat-icon-blu { background: var(--blu-chiaro); color: var(--blu); }
.stat-icon-viola { background: var(--viola-chiaro); color: var(--viola); }
.stat-icon-ciano { background: var(--ciano-chiaro); color: var(--ciano); }
.stat-icon-verde { background: var(--verde-chiaro); color: var(--verde); }

.stat-label { display: block; font-size: 12.5px; color: var(--testo-2); }
.stat-value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }

.griglia-2 { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; align-items: start; }

.pannello { padding: 2px 0 8px; }
.pannello-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--bordo);
}
.pannello-head h2 { font-size: 15.5px; font-weight: 650; }
.pannello > p { padding: 16px 20px; color: var(--testo-2); }

/* elenco dei passi */
.passi { list-style: none; margin: 0; padding: 8px 8px 4px; }
.passi li { display: flex; gap: 13px; padding: 12px; border-radius: var(--raggio-sm); }
.passi li + li { border-top: 1px dashed var(--bordo); }
.passo-n {
  width: 26px; height: 26px; flex: none;
  border-radius: 9px;
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700;
  color: var(--blu);
  background: var(--blu-chiaro);
}
.passi strong { display: block; font-size: 14px; font-weight: 600; }
.passi p { color: var(--testo-2); font-size: 13px; margin-top: 2px; }

/* stato del sistema */
.stati { list-style: none; margin: 0; padding: 10px 8px 6px; }
.stati li { display: flex; gap: 12px; align-items: center; padding: 11px 12px; }
.stati li + li { border-top: 1px solid var(--bordo); }
.stati strong { display: block; font-size: 13.5px; font-weight: 600; }
.stati small { color: var(--testo-3); font-size: 12px; }

.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot-verde { background: var(--verde); box-shadow: 0 0 0 4px rgba(22, 163, 74, .13); }
.dot-grigio { background: #c3c9d6; box-shadow: 0 0 0 4px rgba(195, 201, 214, .2); }

/* -------------------------------------------------------------- pulsanti */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--raggio-sm);
  border: 1px solid var(--bordo-forte);
  background: #fff;
  color: var(--testo);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .06s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { background: #fafbfe; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; }

.btn-primario {
  background: linear-gradient(135deg, var(--blu) 0%, var(--viola) 130%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(37, 99, 235, .9);
}
.btn-primario:hover { background: linear-gradient(135deg, var(--blu-scuro) 0%, #6d28d9 130%); }

.btn-ghost {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .12);
  color: #dbe2f1;
}
.btn-ghost:hover { background: rgba(255, 255, 255, .12); }

/* Nella barra in alto (sfondo chiaro) il "ghost" deve essere leggibile:
   testo nero, carattere piu' grande, bordo visibile. */
.topbar-actions .btn:not(.btn-primario):not(.btn-rosso) {
  background: #fff;
  border-color: var(--bordo-forte);
  color: var(--testo);
  font-size: 15px;
  font-weight: 700;
  padding: 10px 18px;
}

.topbar-actions .btn:not(.btn-primario):not(.btn-rosso):hover {
  background: var(--blu-chiaro);
  border-color: var(--blu);
  color: var(--blu-scuro);
}

.btn-block { width: 100%; }
.btn-lg { padding: 12px 18px; font-size: 15px; }

/* ---------------------------------------------------------------- form */
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 12.5px; font-weight: 600; color: var(--testo-2); margin-bottom: 6px; }

.field input {
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--raggio-sm);
  border: 1px solid var(--bordo-forte);
  background: #fff;
  font: inherit;
  font-size: 14.5px;
  color: var(--testo);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.field input:focus {
  outline: none;
  border-color: var(--blu);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .13);
}

/* ------------------------------------------------------------- messaggi */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 13px;
  border-radius: var(--raggio-sm);
  font-size: 13.5px;
  margin-bottom: 16px;
}
.alert svg { width: 17px; height: 17px; margin-top: 1px; }
.alert-errore { background: var(--rosso-chiaro); color: #991b1b; border: 1px solid #fecaca; }

/* --------------------------------------------------------------- accesso */
.auth-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 500px at 12% 8%, rgba(124, 58, 237, .16), transparent 60%),
    radial-gradient(800px 480px at 88% 92%, rgba(37, 99, 235, .18), transparent 62%),
    linear-gradient(160deg, #0c1120 0%, #131c30 55%, #0e1424 100%);
}

.auth-deco {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
  pointer-events: none;
}

.auth-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: rgba(255, 255, 255, .985);
  border-radius: 20px;
  padding: 30px 30px 24px;
  box-shadow: var(--ombra-forte);
  border: 1px solid rgba(255, 255, 255, .5);
}

.auth-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.auth-brand h1 { font-size: 20px; letter-spacing: .06em; font-weight: 800; }
.auth-brand h1 span { color: var(--testo-3); font-weight: 500; letter-spacing: .22em; font-size: 12px; }
.auth-brand p { color: var(--testo-2); font-size: 12.5px; margin-top: 2px; }

.auth-foot { margin-top: 18px; text-align: center; color: var(--testo-3); font-size: 11.5px; }

.auth-card-errore { text-align: center; }
.auth-card-errore p { color: var(--testo-2); margin: 8px 0 20px; }

.errore-codice {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -.03em;
  background: linear-gradient(135deg, var(--blu), var(--viola));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------------- tabelle */
.tabella-wrap { overflow-x: auto; padding: 4px 8px 10px; }

.tabella { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabella thead th {
  text-align: left;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--testo-3);
  font-weight: 600;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bordo);
  white-space: nowrap;
}
.tabella tbody td { padding: 12px; border-bottom: 1px solid var(--bordo); vertical-align: middle; }
.tabella tbody tr:last-child td { border-bottom: none; }
.tabella tbody tr:hover { background: #fafbfe; }

.cella-persona { display: flex; align-items: center; gap: 10px; }
.cella-persona strong { display: block; font-size: 14px; font-weight: 600; }
.cella-persona small { color: var(--testo-3); font-size: 12px; }
.cella-azioni { text-align: right; white-space: nowrap; }

.avatar-sm {
  width: 32px; height: 32px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #1e3a8a;
  background: linear-gradient(135deg, #e0e7ff, #bfdbfe);
  display: grid; place-items: center;
}

.mono, code {
  font-family: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  font-size: 13px;
  background: #f1f4fa;
  border: 1px solid var(--bordo);
  border-radius: 7px;
  padding: 2px 7px;
  color: #24314d;
}

/* --------------------------------------------------------------- badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}
.badge-admin { background: #f3e8ff; color: #6b21a8; }
.badge-supervisor { background: #e0f2fe; color: #075985; }
.badge-agent { background: #eef2f7; color: #334155; }
.badge-attivo { background: var(--verde-chiaro); color: #15803d; }
.badge-spento { background: #f1f3f7; color: #6b7280; }

.nota { font-size: 12.5px; color: var(--testo-3); }
.nota-forte { font-size: 13px; color: #92400e; font-weight: 600; margin-bottom: 8px; }
.testo-tenue { color: var(--testo-3); }

/* ------------------------------------------------------------- pulsanti */
.btn-piccolo { padding: 5px 11px; font-size: 12.5px; border-radius: 8px; }
.btn-ok { background: var(--verde-chiaro); border-color: #bbf7d0; color: #15803d; }
.btn-ok:hover { background: #dcfce7; }
.btn-pericolo { background: var(--rosso-chiaro); border-color: #fecaca; color: #b91c1c; }
.btn-pericolo:hover { background: #fee2e2; }

/* --------------------------------------------------------------- moduli */
.modulo { padding: 22px; }
.modulo-griglia {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 18px;
}
.modulo-griglia .field-check { grid-column: 1 / -1; }
.modulo-azioni {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--bordo);
}

.field select,
.field textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--raggio-sm);
  border: 1px solid var(--bordo-forte);
  background: #fff;
  font: inherit;
  font-size: 14.5px;
  color: var(--testo);
}
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blu);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .13);
}
.field textarea { min-height: 110px; resize: vertical; }

.field-check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--testo-2);
  padding: 10px 0 4px;
}
.field-check input { width: 17px; height: 17px; accent-color: var(--blu); }
.aiuto { display: block; font-size: 11.5px; color: var(--testo-3); margin-top: 5px; }

/* ------------------------------------------------------------ credenziali */
.credenziali { padding: 16px 20px 20px; }
.credenziali dl,
.dettagli { display: grid; grid-template-columns: 130px 1fr; gap: 9px 14px; margin: 0; }
.credenziali dt,
.dettagli dt { font-size: 12.5px; color: var(--testo-2); font-weight: 600; }
.credenziali dd,
.dettagli dd { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.credenziali .aiuto { margin-top: 14px; }
.dettagli { padding: 16px 20px 18px; border-top: 1px solid var(--bordo); }

.azioni-elenco { display: flex; flex-direction: column; gap: 9px; padding: 16px 20px 14px; }

.riquadro-password {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 20px;
  border-left: 4px solid var(--blu);
  background: linear-gradient(100deg, #eef4ff, #ffffff 70%);
}
.riquadro-password strong { font-size: 14px; }
.riquadro-password p { color: var(--testo-2); font-size: 12.5px; margin-top: 2px; }
.password-valore { display: flex; align-items: center; gap: 10px; }
.password-valore code { font-size: 14px; padding: 6px 10px; }

.alert-ok { background: var(--verde-chiaro); color: #166534; border: 1px solid #bbf7d0; }
.alert-attesa { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

.copia-nascosta { position: fixed; opacity: 0; pointer-events: none; top: 0; left: 0; }

/* ------------------------------------------------------------- campagne */
.griglia-campagne {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 16px;
}

.card-campagna { display: flex; flex-direction: column; padding: 18px 18px 14px; }
.card-campagna-testata { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-campagna-testata h2 { font-size: 16.5px; font-weight: 650; letter-spacing: -.01em; }
.card-campagna-testata p { color: var(--testo-3); font-size: 12.5px; margin-top: 3px; }

.card-campagna-corpo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 14px;
}
.dato { display: flex; flex-direction: column; gap: 3px; }
.dato span { font-size: 11.5px; color: var(--testo-3); text-transform: uppercase; letter-spacing: .06em; }
.dato strong { font-size: 14px; font-weight: 600; }

.barra-avanzamento {
  height: 6px;
  border-radius: 999px;
  background: #eef1f7;
  overflow: hidden;
  margin-bottom: 12px;
}
.segmento { display: block; height: 100%; background: linear-gradient(90deg, var(--blu), var(--viola)); }

.card-campagna-piede { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.badge-modo-manual { background: #eef2f7; color: #334155; }
.badge-modo-ratio { background: var(--viola-chiaro); color: #6d28d9; }
.badge-modo-progressive { background: var(--ciano-chiaro); color: #0e7490; }

.badge-cat-positivo { background: var(--verde-chiaro); color: #15803d; }
.badge-cat-negativo { background: var(--rosso-chiaro); color: #b91c1c; }
.badge-cat-ricontatto { background: #fffbeb; color: #b45309; }
.badge-cat-neutro { background: #eef2f7; color: #475569; }

.mini {
  display: inline-block;
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 6px;
  background: #f1f4fa;
  color: #475569;
  margin: 1px 3px 1px 0;
}
.mini-blu { background: #e8f0ff; color: #1d4ed8; }
.cella-effetti { max-width: 220px; }

/* ------------------------------------------------------- scelte multiple */
.scelte-esiti {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  padding: 16px 20px;
}
.scelta {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-sm);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.scelta:hover { border-color: #c7d2fe; background: #fbfcff; }
.scelta input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--blu); }
.scelta-testo strong { display: block; font-size: 13.5px; font-weight: 600; }
.scelta-testo small { color: var(--testo-3); font-size: 11.5px; }
.scelta-spenta { opacity: .6; }

/* ------------------------------------------------------------ ritocchi */
.field-largo { grid-column: 1 / -1; }
.pannello-head-modulo { padding: 0 0 14px; margin-bottom: 16px; }
.modulo-senza-card { padding: 16px 20px 20px; }
.cards-tre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.griglia-2-larga { grid-template-columns: 1.4fr .6fr; }
.casella-flag { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
.field-check-inline { padding: 0; font-size: 13px; }

/* ----------------------------------------------------- liste e import */
.num { text-align: right; font-variant-numeric: tabular-nums; }
.blocco { display: block; color: var(--testo-3); font-size: 11.5px; }
.scarto { color: var(--rosso); font-weight: 600; }
.testo-scarto { color: var(--rosso); }

.motivi { list-style: none; margin: 0; padding: 10px 20px 16px; }
.motivi li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--bordo);
  font-size: 13.5px;
}
.motivi li:last-child { border-bottom: none; }
.motivi strong { color: var(--rosso); font-variant-numeric: tabular-nums; }

.nota-spaziata { padding: 16px 20px 20px; line-height: 1.7; }
.nota-spaziata code { margin-right: 3px; }

.badge-stato-new { background: #e8f0ff; color: #1d4ed8; }
.badge-stato-calling { background: #fffbeb; color: #b45309; }
.badge-stato-dispo { background: var(--verde-chiaro); color: #15803d; }
.badge-stato-richiamo { background: #fef3c7; color: #92400e; }
.badge-stato-dnc { background: var(--rosso-chiaro); color: #b91c1c; }

.field input[type="file"] {
  padding: 9px 12px;
  background: #fbfcff;
  border: 1px dashed var(--bordo-forte);
  cursor: pointer;
}

/* -------------------------------------------------- console operatore */
.console-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-radius: var(--raggio);
  background: linear-gradient(100deg, #eef4ff, #ffffff 60%);
  border: 1px solid var(--bordo);
}
.console-barra-form { display: flex; align-items: flex-end; gap: 12px; }
.field-inline { display: flex; flex-direction: column; gap: 5px; }
.field-inline span { font-size: 11.5px; font-weight: 600; color: var(--testo-2); }
.field-inline select {
  padding: 9px 12px;
  border-radius: var(--raggio-sm);
  border: 1px solid var(--bordo-forte);
  background: #fff;
  font: inherit;
  font-size: 14px;
  min-width: 220px;
}
.console-suggerimento { color: var(--testo-3); font-size: 12.5px; max-width: 380px; }

.console-vuota { padding: 40px 24px; text-align: center; }
.console-vuota-icona {
  width: 62px; height: 62px;
  margin: 0 auto 14px;
  border-radius: 20px;
  display: grid; place-items: center;
  background: var(--blu-chiaro);
  color: var(--blu);
}
.console-vuota-icona svg { width: 30px; height: 30px; }
.console-vuota h2 { font-size: 18px; }
.console-vuota p { color: var(--testo-2); margin-top: 6px; font-size: 13.5px; }
.storico-piccolo { margin-top: 22px; text-align: left; max-width: 460px; margin-left: auto; margin-right: auto; }
.storico-piccolo h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--testo-3); }
.storico-piccolo ul { list-style: none; padding: 8px 0 0; margin: 0; }
.storico-piccolo li { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; }

.griglia-console { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; align-items: start; }

.scheda-contatto { padding: 20px; }
.scheda-testata { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.scheda-testata h2 { font-size: 21px; letter-spacing: -.02em; }
.scheda-riga { color: var(--testo-2); font-size: 13px; margin-top: 3px; }
.telefono-blocco { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.telefono-grande {
  font-size: 20px;
  padding: 7px 12px;
  background: #0f172a;
  color: #e2e8f0;
  border: none;
}

.scheda-campi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 18px 0;
  padding: 16px 0;
  border-top: 1px solid var(--bordo);
  border-bottom: 1px solid var(--bordo);
}
.scheda-campi dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--testo-3); }
.scheda-campi dd { margin: 2px 0 0; font-size: 13.5px; }

.script-campagna {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--raggio-sm);
  padding: 13px 15px;
  margin-bottom: 16px;
}
.script-campagna h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #92400e; }
.script-campagna p { font-size: 13.5px; margin-top: 6px; white-space: pre-wrap; }

.note-blocco h3 { font-size: 13px; margin-bottom: 8px; }
.note-elenco { list-style: none; margin: 0 0 12px; padding: 0; max-height: 180px; overflow-y: auto; }
.note-elenco li { font-size: 13px; padding: 6px 0; border-bottom: 1px dashed var(--bordo); }
.nota-form { display: flex; gap: 8px; }
.nota-form input {
  flex: 1;
  padding: 9px 12px;
  border-radius: var(--raggio-sm);
  border: 1px solid var(--bordo-forte);
  font: inherit;
  font-size: 13.5px;
}

.esiti-blocco { padding-bottom: 16px; }
.esiti-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  padding: 16px 18px 8px;
}
.esito-scelta {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-sm);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.esito-scelta:hover { border-color: #c7d2fe; background: #fbfcff; }
.esito-scelta input { margin-top: 2px; accent-color: var(--blu); }
.esito-scelta input:checked + .esito-testo strong { color: var(--blu-scuro); }
.esito-testo strong { display: block; font-size: 13px; font-weight: 600; }
.esito-testo small { color: var(--testo-3); font-size: 11px; }

.esito-extra { padding: 4px 18px 0; }
.esito-nota { padding: 8px 18px 0; }
.esito-azioni { padding: 12px 18px 0; }
.rilascia-form { padding: 10px 18px 0; }

/* ----------------------------------------------------------- responsivo */
@media (max-width: 1080px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .griglia-2 { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav-label, .sidebar-foot .who { display: none; }
  .topbar, .content { padding-left: 18px; padding-right: 18px; }
}

@media (max-width: 520px) {
  .cards { grid-template-columns: 1fr; }
  .auth-card { padding: 24px 20px 20px; }
}

/* =================================================== scelta campagna */
.griglia-campagne {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}

.campagna-scheda {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.campagna-scheda:hover {
  border-color: #c7d2fe;
  box-shadow: var(--ombra);
  transform: translateY(-2px);
}

.campagna-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.campagna-testa strong { font-size: 16px; letter-spacing: -.01em; }
.campagna-descrizione { font-size: 13px; min-height: 36px; }

.campagna-numeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.campagna-numeri div { background: var(--fondo); border: 1px solid var(--bordo); border-radius: var(--raggio-sm); padding: 10px 4px; }
.campagna-numeri strong { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.campagna-numeri span { font-size: 11px; color: var(--testo-3); }

/* ================================================ statistiche compatte */
.griglia-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }

.griglia-stat .stat {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 16px 18px;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}

.griglia-stat .stat span { font-size: 12.5px; color: var(--testo-2); }
.griglia-stat .stat strong { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }

.griglia-due { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.campi-due { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.pannello-call { padding: 26px 20px 20px; text-align: center; }
.pannello-call form { display: flex; justify-content: center; }

.btn-chiamata {
  padding: 18px 34px;
  font-size: 18px;
  border-radius: 16px;
  gap: 12px;
  box-shadow: 0 14px 30px -14px rgba(37, 99, 235, .8);
}

.btn-chiamata svg { width: 22px; height: 22px; }

.righe-richiamo { list-style: none; margin: 0; padding: 4px 8px 10px; }
.righe-richiamo li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--raggio-sm);
}
.righe-richiamo li + li { border-top: 1px solid var(--bordo); }
.richiamo-data { font-size: 13.5px; font-weight: 600; }
.richiamo-nota { font-size: 13px; color: var(--testo-2); text-align: right; }
.link-forte { color: var(--blu); font-weight: 600; }
.link-forte:hover { text-decoration: underline; }
.titolo-sezione { font-size: 14px; font-weight: 650; padding: 14px 18px 6px; }
.azioni-griglia { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 18px 8px; }

/* ================================================== barra telefono */
.barra-telefono {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 22px;
  border-radius: var(--raggio);
  background: linear-gradient(120deg, #101a2f 0%, #1d2947 55%, #26365c 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: var(--ombra-forte);
}

.telefono-numero { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.telefono-etichetta {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: #dbe6ff;
}

/* pallino di stato accanto alla scritta */
.telefono-etichetta::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #64748b;
  box-shadow: 0 0 0 4px rgba(100, 116, 139, .22);
  flex: 0 0 auto;
}

.telefono-numero strong {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
}

.telefono-timer {
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #7dd3fc;
  background: rgba(125, 211, 252, .12);
  border: 1px solid rgba(125, 211, 252, .28);
  border-radius: 999px;
  padding: 6px 16px;
}

.telefono-azioni { display: flex; gap: 10px; margin-left: auto; }

/* pulsante Rec: spento e' neutro, acceso e' rosso con il pallino che pulsa */
.btn-rec { display: inline-flex; align-items: center; gap: 7px; }
.btn-rec .punto-rec {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f87171;
  box-shadow: 0 0 0 2px rgba(248, 113, 113, .25);
}
.btn-rec.is-attivo {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
}
.btn-rec.is-attivo .punto-rec {
  background: #fff;
  animation: pulsa-rec 1.2s ease-in-out infinite;
}
@keyframes pulsa-rec {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

/* filtri della pagina registrazioni */
.filtri-registrazioni {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
}
.filtri-registrazioni .field { min-width: 180px; margin: 0; }
.filtri-azioni { display: flex; gap: 8px; }
.cellafile { max-width: 320px; }
.tabella audio { height: 32px; margin-bottom: 4px; }

.barra-telefono .btn-ghost {
  color: #e3ebff;
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .08);
}
.barra-telefono .btn-ghost:hover { background: rgba(255, 255, 255, .18); }

.btn-rosso {
  background: var(--rosso);
  color: #fff;
  border-color: var(--rosso);
  box-shadow: 0 12px 26px -14px rgba(220, 38, 38, .9);
}
.btn-rosso:hover { background: #b91c1c; }

/* ========================================================= modale */
.modale { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modale-velo { position: absolute; inset: 0; background: rgba(10, 15, 30, .55); backdrop-filter: blur(2px); }

.modale-finestra {
  position: relative;
  width: min(760px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--superficie);
  border-radius: 18px;
  box-shadow: var(--ombra-forte);
  animation: modale-entra .16s ease-out;
}

@keyframes modale-entra {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to { opacity: 1; transform: none; }
}

.modale-testa {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px 12px;
  border-bottom: 1px solid var(--bordo);
}

.modale-testa h2 { font-size: 18px; font-weight: 700; }
.modale-chiudi {
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--testo-3);
  cursor: pointer;
  padding: 0 4px;
}
.modale-chiudi:hover { color: var(--rosso); }

.modale-finestra-stretta { width: min(520px, 100%); }
.modale-finestra-larga { width: min(980px, 100%); }
.modale-corpo { padding: 16px 22px 4px; }
.tabella-appuntamenti { font-size: 13.5px; }
.tabella-appuntamenti td, .tabella-appuntamenti th { padding: 10px; }

/* link che si comporta da pulsante (dentro i pannelli) */
.link-pulsante {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blu);
  cursor: pointer;
}
.link-pulsante:hover { text-decoration: underline; }

.badge-tenue {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: #eef1f7;
  border: 1px solid var(--bordo);
  color: var(--testo-2);
  font-size: 11.5px;
  font-weight: 600;
}

.modale-azioni {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px 20px;
  border-top: 1px solid var(--bordo);
  margin-top: 16px;
}

/* ------------------------------------------ numeri chiamanti (CLI) */
.cli-elenco { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }

.cli-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px 6px 11px;
  border-radius: 999px;
  background: var(--blu-chiaro);
  border: 1px solid #c7d2fe;
  color: var(--blu-scuro);
  font-size: 13.5px;
}

.cli-chip code { font-size: 13.5px; letter-spacing: .4px; }

.cli-chip-x {
  border: none;
  background: none;
  color: #64748b;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.cli-chip-x:hover { color: var(--rosso); }

.modulo-azioni-doppie { display: flex; gap: 10px; flex-wrap: wrap; }
.nota-cli { margin: 0 0 12px; }

.righe-cli { padding: 16px 22px 0; display: flex; flex-direction: column; gap: 9px; }

.riga-cli {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  height: 42px;
  border-radius: var(--raggio-sm);
  border: 1px solid var(--bordo-forte);
  background: #fff;
}

.riga-cli:focus-within {
  border-color: var(--blu);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.riga-cli-prefisso { font-size: 13px; font-weight: 600; color: var(--testo-3); }

.riga-cli input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  letter-spacing: .5px;
  color: var(--testo);
}

.riga-cli-x {
  border: none;
  background: none;
  color: var(--testo-3);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.riga-cli-x:hover { color: var(--rosso); }

.modale-finestra > .btn-ghost {
  margin: 12px 22px 0;
}

/* =================================================== appuntamenti */
.riga-ritardo { background: #fffbf5; }
.badge-ok { background: var(--verde-chiaro); color: #15803d; }
.badge-rosso { background: var(--rosso-chiaro); color: #b91c1c; }
.cella-azione { text-align: right; white-space: nowrap; }
.alert-info { background: var(--blu-chiaro); color: #1e40af; border: 1px solid #c7d2fe; }

@media (max-width: 1080px) {
  .griglia-due, .campi-due { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .barra-telefono { flex-direction: column; align-items: flex-start; gap: 10px; }
  .griglia-console { grid-template-columns: 1fr; }
}

/* ============================================== telefono nella sidebar */
.telefono-widget {
  margin: 0 4px 12px;
  padding: 10px 12px;
  border-radius: var(--raggio-sm);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.telefono-widget-riga {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: var(--sidebar-testo);
}

.telefono-widget .btn {
  color: #cfe0ff;
  border-color: rgba(255, 255, 255, .18);
  background: transparent;
}

.telefono-widget .btn:hover { background: rgba(255, 255, 255, .1); }
.telefono-widget .btn:disabled { opacity: .55; cursor: default; }

.telefono-aiuto {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--sidebar-testo);
  opacity: .85;
}

/* l'operatore ha il telefono in cima alla barra laterale, al posto dei menu */
.nav-telefono { margin-bottom: 6px; }
.nav-telefono .telefono-widget { margin: 0 0 8px; }

/* chiamata manuale dalla schermata campagna */
.griglia-azioni { margin-bottom: 16px; }

.pannello-manuale .pannello-head { margin-bottom: 12px; }

.form-manuale {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* il campo e' largo quanto un numero, non quanto la colonna */
.campo-numero {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 0 11px;
  height: 40px;
  border-radius: var(--raggio-sm);
  border: 1px solid var(--bordo-forte);
  background: #fff;
  cursor: text;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.campo-numero:focus-within {
  border-color: var(--blu);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.campo-numero-prefisso {
  font-size: 13px;
  font-weight: 600;
  color: var(--testo-3);
}

.campo-numero input {
  width: 122px;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  letter-spacing: .4px;
  color: var(--testo);
}

.campo-numero input::placeholder { color: var(--testo-3); letter-spacing: .2px; }

.form-manuale .btn { flex: 0 0 auto; height: 40px; }

.manuale-nota { margin: 10px 0 0; }

/* ------------------------------------------- call log che si espande */
.pannello-log .log-chiuso { display: block; }

/* il contenuto si vede solo quando la barra e' aperta */
.log-chiuso > *:not(summary) { display: none; }
.log-chiuso[open] > *:not(summary) { display: block; }

.log-testa {
  cursor: pointer;
  list-style: none;
  margin: 0;
  user-select: none;
}

/* via il triangolino di default dei browser */
.log-testa::-webkit-details-marker { display: none; }
.log-testa::marker { content: ''; }

.log-testa:hover h2 { color: var(--blu-scuro); }

.log-etichetta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blu);
}

.log-freccia {
  width: 16px;
  height: 16px;
  fill: currentColor;
  transition: transform .18s ease;
}

.log-riduci { display: none; }

details[open] .log-apri { display: none; }
details[open] .log-riduci { display: inline; }
details[open] .log-freccia { transform: rotate(180deg); }

.log-corpo { padding-top: 4px; }

.dot-ambra { background: var(--ambra); box-shadow: 0 0 0 4px rgba(217, 119, 6, .16); }
.dot-rosso { background: var(--rosso); box-shadow: 0 0 0 4px rgba(220, 38, 38, .16); }

.azioni-verticali {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 18px 12px;
}

.btn.is-attivo {
  background: var(--ambra);
  border-color: var(--ambra);
  color: #fff;
}

.is-attivo:hover { background: #b45309; }

/* ============================================ ordine degli esiti */
.tabella-ordine tbody tr[draggable='true'] { cursor: grab; }
.tabella-ordine tbody tr.trascinata { opacity: .45; background: var(--blu-chiaro); }
.tabella-ordine tbody tr.riga-sopra { box-shadow: inset 0 2px 0 var(--blu); }

.cella-num { width: 46px; text-align: center; }

.numero-ordine {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--blu-chiaro);
  color: var(--blu-scuro);
  font-size: 12.5px;
  font-weight: 700;
}

.cella-presa { width: 26px; color: var(--testo-3); text-align: center; }
.presa { cursor: grab; font-size: 16px; line-height: 1; user-select: none; }
.cella-presa:hover { color: var(--blu); }

.btn-freccia {
  padding: 3px 8px;
  min-width: 28px;
  font-size: 13px;
  line-height: 1.2;
}

/* ============================================ esiti di sistema */
.badge-sistema { background: #eef2f7; color: #475569; border: 1px dashed #cbd5e1; }

.esito-scelta-sistema { background: #fbfcfe; border-style: dashed; }
.esito-scelta-sistema .esito-testo strong { color: var(--testo-2); }

.nota-sotto-sezione { padding: 0 0 12px; line-height: 1.6; }

/* ============================================ supervisione (realtime) */
.badge-stato-sup { background: #eef2f7; color: #475569; }
.badge-stato-sup[data-stato='ready'] { background: var(--verde-chiaro); color: #15803d; }
.badge-stato-sup[data-stato='in_call'] { background: #fffbeb; color: #b45309; }
.badge-stato-sup[data-stato='wrap'] { background: var(--ciano-chiaro); color: #0e7490; }
.badge-stato-sup[data-stato='pausa'] { background: #fef3c7; color: #92400e; }
.badge-stato-sup[data-stato='offline'] { background: #f1f3f7; color: #6b7280; }

.vuoto { padding: 0 20px 18px; }

/* ============================================ report chiamate */
.filtri-report {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  padding: 18px 20px 6px;
}
.filtri-report .field { min-width: 150px; margin: 0; }
.note-filtri { padding: 0 20px 16px; }

/* ============================================ cancellazioni */
.forma-inline { display: inline-block; margin: 0; }

.pannello-pericolo { border-color: #fecaca; }
.pannello-pericolo .pannello-head h2 { color: #b91c1c; }
.pericolo-corpo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 4px 20px 20px;
}
.pericolo-corpo p { margin: 0; color: var(--testo-2); font-size: 13.5px; max-width: 620px; }
.pericolo-corpo form { margin: 0; }