/* Archivio lead — foglio di stile unico.
   Si usa tutto il giorno: di giorno alla luce della finestra, di sera con la lampada.
   Per questo i colori stanno in due temi (sistema, con scavalco manuale) e la
   barra in alto resta scura in entrambi: fa da spina dorsale e non si confonde
   con i dati. Un solo colore d'azione (magenta), distinto dai tre semantici. */

:root {
  color-scheme: light dark;

  --sfondo: oklch(0.972 0.004 275);
  --sfondo-cavo: oklch(0.945 0.006 275);
  --superficie: oklch(1 0 0);
  --superficie-alta: oklch(0.988 0.003 275);

  --inchiostro: oklch(0.21 0.022 275);
  --testo-tenue: oklch(0.47 0.018 275);
  /* 0.52: il minimo che tiene 4.5:1 anche sul fondo incassato (segnaposto, note). */
  --testo-debole: oklch(0.52 0.016 275);
  --linea: oklch(0.912 0.006 275);
  --linea-forte: oklch(0.84 0.01 275);

  --chrome: oklch(0.185 0.022 275);
  --chrome-cavo: oklch(0.25 0.022 275);
  --chrome-linea: oklch(0.32 0.022 275);
  --chrome-testo: oklch(0.97 0.004 275);
  --chrome-tenue: oklch(0.73 0.016 275);

  /* Testo/bordi d'accento sulla pagina. */
  --accento: oklch(0.49 0.19 335);
  --accento-vivo: oklch(0.42 0.175 335);
  --accento-velo: oklch(0.96 0.027 335);
  --accento-orlo: oklch(0.87 0.065 335);
  /* Riempimento dei pulsanti: identico nei due temi, bianco sopra. */
  --azione: oklch(0.52 0.2 335);
  --azione-forte: oklch(0.44 0.185 335);
  --su-azione: oklch(0.99 0.004 335);

  --ok: oklch(0.45 0.12 158);
  --ok-velo: oklch(0.953 0.038 158);
  --ok-orlo: oklch(0.86 0.07 158);
  --avviso: oklch(0.47 0.105 70);
  --avviso-velo: oklch(0.962 0.045 82);
  --avviso-orlo: oklch(0.87 0.075 82);
  --errore: oklch(0.5 0.19 25);
  --errore-velo: oklch(0.963 0.025 25);
  --errore-orlo: oklch(0.88 0.06 25);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --larghezza: 74rem;

  /* Forme: controlli 10px, superfici 14px, bande 20px, distintivi a pillola. */
  --r-minimo: 6px;
  --r-controllo: 10px;
  --r-superficie: 14px;
  --r-banda: 20px;
  --pillola: 999px;

  --ombra-sollevata: 0 1px 2px oklch(0.21 0.02 275 / 0.08), 0 4px 10px oklch(0.21 0.02 275 / 0.08);
  --ombra-colonna: -10px 0 10px -10px oklch(0.21 0.02 275 / 0.35);

  --z-riga-fissa: 1;
  --z-tendina: 20;
  --z-testata: 40;

  --esci: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) { color-scheme: dark; }
}

/* Le due regole scure sono identiche: una per il sistema, una per lo scavalco
   manuale. Tenerle separate evita che il tema chiaro forzato venga sovrascritto. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --sfondo: oklch(0.175 0.014 275);
    --sfondo-cavo: oklch(0.145 0.012 275);
    --superficie: oklch(0.215 0.015 275);
    --superficie-alta: oklch(0.247 0.016 275);

    --inchiostro: oklch(0.955 0.004 275);
    --testo-tenue: oklch(0.735 0.014 275);
    --testo-debole: oklch(0.655 0.013 275);
    --linea: oklch(0.3 0.016 275);
    --linea-forte: oklch(0.42 0.02 275);

    --chrome: oklch(0.145 0.014 275);
    --chrome-cavo: oklch(0.215 0.015 275);
    --chrome-linea: oklch(0.29 0.016 275);

    --accento: oklch(0.74 0.16 335);
    --accento-vivo: oklch(0.82 0.13 335);
    --accento-velo: oklch(0.285 0.055 335);
    --accento-orlo: oklch(0.42 0.1 335);

    --ok: oklch(0.78 0.14 158);
    --ok-velo: oklch(0.275 0.05 158);
    --ok-orlo: oklch(0.4 0.08 158);
    --avviso: oklch(0.82 0.13 82);
    --avviso-velo: oklch(0.29 0.05 82);
    --avviso-orlo: oklch(0.42 0.08 82);
    --errore: oklch(0.72 0.17 25);
    --errore-velo: oklch(0.29 0.06 25);
    --errore-orlo: oklch(0.43 0.11 25);

    --ombra-sollevata: 0 1px 2px oklch(0 0 0 / 0.4), 0 4px 12px oklch(0 0 0 / 0.35);
    --ombra-colonna: -12px 0 12px -10px oklch(0 0 0 / 0.65);
  }
}

:root[data-tema="scuro"] {
  color-scheme: dark;

  --sfondo: oklch(0.175 0.014 275);
  --sfondo-cavo: oklch(0.145 0.012 275);
  --superficie: oklch(0.215 0.015 275);
  --superficie-alta: oklch(0.247 0.016 275);

  --inchiostro: oklch(0.955 0.004 275);
  --testo-tenue: oklch(0.735 0.014 275);
  --testo-debole: oklch(0.655 0.013 275);
  --linea: oklch(0.3 0.016 275);
  --linea-forte: oklch(0.42 0.02 275);

  --chrome: oklch(0.145 0.014 275);
  --chrome-cavo: oklch(0.215 0.015 275);
  --chrome-linea: oklch(0.29 0.016 275);

  --accento: oklch(0.74 0.16 335);
  --accento-vivo: oklch(0.82 0.13 335);
  --accento-velo: oklch(0.285 0.055 335);
  --accento-orlo: oklch(0.42 0.1 335);

  --ok: oklch(0.78 0.14 158);
  --ok-velo: oklch(0.275 0.05 158);
  --ok-orlo: oklch(0.4 0.08 158);
  --avviso: oklch(0.82 0.13 82);
  --avviso-velo: oklch(0.29 0.05 82);
  --avviso-orlo: oklch(0.42 0.08 82);
  --errore: oklch(0.72 0.17 25);
  --errore-velo: oklch(0.29 0.06 25);
  --errore-orlo: oklch(0.43 0.11 25);

  --ombra-sollevata: 0 1px 2px oklch(0 0 0 / 0.4), 0 4px 12px oklch(0 0 0 / 0.35);
  --ombra-colonna: -12px 0 12px -10px oklch(0 0 0 / 0.65);
}

:root[data-tema="chiaro"] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--inchiostro);
  font: 400 1rem/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.15; text-wrap: balance; margin: 0; }
h1 {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  margin-bottom: 1.75rem;
}
h2 { font-size: 1.1875rem; font-weight: 650; letter-spacing: -0.016em; }
h3 { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
code { font-family: var(--mono); font-size: 0.875em; }
a { color: var(--accento); text-underline-offset: 2px; }
a:hover { color: var(--accento-vivo); }

:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }

/* ---------- Testata ---------- */

/* La barra resta in alto e scura: la navigazione non scorre via mentre si
   lavora su una tabella lunga, e il canvas dei dati resta chiaro. */
.testata {
  position: sticky;
  top: 0;
  z-index: var(--z-testata);
  background: var(--chrome);
  border-bottom: 1px solid oklch(0 0 0 / 0.25);
}
body:has(.contenuto.larga) { --larghezza: 96rem; }

.testata-interno {
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: 0.625rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 3.75rem;
}
.marchio {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--chrome-testo);
  text-decoration: none;
  white-space: nowrap;
}
.marchio span {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--chrome-tenue);
}

/* Due mondi: Chiamate / LinkedIn. Prima del menu di sezione. */
.aree {
  display: inline-flex;
  flex-shrink: 0;
  gap: 0.125rem;
  padding: 0.25rem;
  background: var(--chrome-cavo);
  border-radius: var(--pillola);
}
.aree a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--chrome-tenue);
  border-radius: var(--pillola);
  transition: color 160ms var(--esci), background-color 160ms var(--esci);
}
.esci-form { margin: 0; }
.aree a:hover { color: var(--chrome-testo); background: oklch(1 0 0 / 0.07); }
.aree a[aria-current="page"] {
  color: oklch(0.17 0.02 275);
  background: var(--chrome-testo);
}

.menu-principale { min-width: 0; flex: 1; }

/* Menu come gruppo segmentato su una pista incassata. */
.menu {
  list-style: none;
  margin: 0;
  padding: 0.25rem;
  display: flex;
  gap: 0.125rem;
  background: var(--chrome-cavo);
  border-radius: var(--pillola);
  overflow-x: auto;
  scrollbar-width: none;
  width: fit-content;
  max-width: 100%;
}
.menu::-webkit-scrollbar { display: none; }
.menu a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.4375rem 0.8125rem;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  color: var(--chrome-tenue);
  border-radius: var(--pillola);
  transition: color 160ms var(--esci), background-color 160ms var(--esci);
}
.menu a:hover { color: var(--chrome-testo); background: oklch(1 0 0 / 0.07); }
/* La voce attiva è una pastiglia chiara: si vede anche con la coda dell'occhio. */
.menu a[aria-current="page"] {
  color: oklch(0.17 0.02 275);
  background: var(--chrome-testo);
  font-weight: 600;
}

.strumenti-testata {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* ---------- Contatore delle chiamate ---------- */

.contatore-chiamate {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--chrome-cavo);
  border-radius: var(--pillola);
}
.contatore-valore {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0 0.5rem;
  min-width: 5.75rem;
  color: var(--chrome-testo);
}
.contatore-numero {
  font-family: var(--mono);
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.contatore-etichetta { font-size: 0.75rem; color: var(--chrome-tenue); }
.contatore-piu, .contatore-meno, .contatore-azzera {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: oklch(1 0 0 / 0.08);
  color: var(--chrome-testo);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 160ms var(--esci), color 160ms var(--esci);
}
.contatore-piu { background: var(--azione); color: var(--su-azione); }
.contatore-piu:hover { background: var(--azione-forte); }
.contatore-meno:hover { background: oklch(1 0 0 / 0.16); }
.contatore-azzera { font-weight: 500; color: var(--chrome-tenue); background: none; }
.contatore-azzera:hover { color: oklch(0.8 0.15 25); background: oklch(0.5 0.19 25 / 0.2); }
.contatore-piu:active, .contatore-meno:active, .contatore-azzera:active { scale: 0.92; }

.tema {
  height: 2rem;
  min-width: 4.25rem;
  padding: 0 0.75rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--chrome-tenue);
  background: var(--chrome-cavo);
  border: 0;
  border-radius: var(--pillola);
  cursor: pointer;
  transition: color 160ms var(--esci), background-color 160ms var(--esci);
}
.tema:hover { color: var(--chrome-testo); background: oklch(1 0 0 / 0.14); }

/* ---------- Contenuto ---------- */

.contenuto {
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: 2.25rem 1.25rem 6rem;
}

/* ---------- Testa di pagina ---------- */

.capo {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--linea);
}
.capo h1 { margin-bottom: 0; }
.sottotitolo {
  color: var(--testo-tenue);
  font-size: 1rem;
  max-width: 70ch;
}
.sottotitolo .telefono { font-weight: 600; }

.solo-lettori {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Sezioni a due colonne ---------- */

.sezione {
  display: grid;
  gap: 1rem 4rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--linea);
}
.sezione:first-of-type { border-top: 0; padding-top: 0.5rem; }
@media (min-width: 60rem) {
  .sezione { grid-template-columns: 16rem minmax(0, 44rem); }
  /* Il titolo resta a vista mentre si compila una sezione lunga. */
  .sezione-testa { position: sticky; top: 5.5rem; }
}
.sezione-testa { display: grid; gap: 0.5rem; align-content: start; }
.sezione-testa h2 { letter-spacing: -0.018em; }
.sezione-testa p { color: var(--testo-tenue); font-size: 0.875rem; max-width: 40ch; }
.sezione-corpo { display: grid; gap: 1.5rem; align-content: start; min-width: 0; }

.titolo-tabella { margin: 2.5rem 0 0.875rem; }
.titolo-tabella + .aiuto { margin-top: -0.625rem; margin-bottom: 0.875rem; }

/* ---------- Campi ---------- */

.modulo { display: grid; gap: 1.5rem; }
.campo { display: grid; gap: 0.375rem; min-width: 0; }
.campo-stretto .con-unita { max-width: 14rem; }
label { font-size: 0.8125rem; font-weight: 600; color: var(--testo-tenue); }

/* 1rem: sotto i 16px Safari iOS zooma al focus. */
input[type="text"],
input[type="search"],
input[type="tel"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="datetime-local"],
select,
textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.8125rem;
  font: inherit;
  font-size: 1rem;
  color: var(--inchiostro);
  background: var(--superficie);
  border: 1px solid var(--linea-forte);
  border-radius: var(--r-controllo);
  transition: border-color 160ms var(--esci), background-color 160ms var(--esci);
}
textarea { min-height: 6rem; resize: vertical; }
input[type="text"]:hover, input[type="search"]:hover, input[type="tel"]:hover,
input[type="password"]:hover, select:hover, textarea:hover { border-color: var(--testo-debole); }
input[type="text"]:focus-visible, input[type="search"]:focus-visible,
input[type="tel"]:focus-visible, input[type="password"]:focus-visible,
input[type="email"]:focus-visible, input[type="number"]:focus-visible,
input[type="datetime-local"]:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-offset: 0;
  border-color: var(--accento);
}
input::placeholder, textarea::placeholder { color: var(--testo-debole); }
input[aria-invalid="true"] { border-color: var(--errore); background: var(--errore-velo); }
input[inputmode="decimal"], input[inputmode="numeric"] {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
input[type="datetime-local"] { width: auto; font-variant-numeric: tabular-nums; }

select {
  padding-right: 2.25rem;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentcolor 50%),
                    linear-gradient(135deg, currentcolor 50%, transparent 50%);
  background-position: right 1.1rem top 1.15rem, right 0.8rem top 1.15rem;
  background-size: 0.3rem 0.3rem;
  background-repeat: no-repeat;
  color: var(--inchiostro);
  cursor: pointer;
}

.con-unita { position: relative; }
.con-unita:has(.unita) input { padding-right: 3.5rem; }
.unita {
  position: absolute;
  right: 0.8125rem;
  top: 50%;
  translate: 0 -50%;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--testo-tenue);
  pointer-events: none;
}

.aiuto { font-size: 0.8125rem; color: var(--testo-tenue); max-width: 68ch; }
.aiuto:empty { display: none; }
.errore { font-size: 0.875rem; color: var(--errore); font-weight: 500; }
.avviso {
  font-size: 0.875rem;
  color: var(--avviso);
  background: var(--avviso-velo);
  border: 1px solid var(--avviso-orlo);
  padding: 0.625rem 0.8125rem;
  border-radius: var(--r-controllo);
  margin: 0.875rem 0 0;
}

input[type="checkbox"] {
  width: 1.0625rem;
  height: 1.0625rem;
  margin: 0;
  accent-color: var(--azione);
}
.spunta {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--inchiostro);
  cursor: pointer;
  white-space: nowrap;
}

fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 0.875rem; min-width: 0; }
legend { font-size: 0.8125rem; font-weight: 600; color: var(--testo-tenue); padding: 0; margin-bottom: 0.5rem; }

input[type="file"] { font: inherit; font-size: 0.9375rem; max-width: 100%; }
input[type="file"]::file-selector-button {
  height: 2.25rem;
  margin-right: 0.75rem;
  padding: 0 0.9375rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accento);
  background: var(--superficie);
  border: 1px solid var(--linea-forte);
  border-radius: var(--pillola);
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--accento-velo); border-color: var(--accento-orlo); }

/* ---------- Pulsanti ---------- */

.azioni { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.bottone {
  height: 2.5rem;
  padding: 0 1.25rem;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--su-azione);
  background: var(--azione);
  border: 1px solid transparent;
  border-radius: var(--r-controllo);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 160ms var(--esci), border-color 160ms var(--esci),
              color 160ms var(--esci), translate 120ms var(--esci);
}
a.bottone { display: inline-flex; align-items: center; text-decoration: none; }
.bottone:hover { background: var(--azione-forte); }
.bottone:active { translate: 0 1px; }
.bottone:disabled,
.bottone:disabled:hover {
  color: var(--testo-debole);
  background: var(--sfondo-cavo);
  border-color: var(--linea);
  cursor: not-allowed;
  translate: none;
}

.bottone-secondario {
  color: var(--inchiostro);
  background: var(--superficie);
  border-color: var(--linea-forte);
}
.bottone-secondario:hover {
  color: var(--accento);
  background: var(--accento-velo);
  border-color: var(--accento-orlo);
}

.bottone-leggero {
  padding: 0.3125rem 0.625rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--testo-tenue);
  background: none;
  border: 0;
  border-radius: var(--pillola);
  cursor: pointer;
  transition: color 160ms var(--esci), background-color 160ms var(--esci);
}
a.bottone-leggero { display: inline-flex; align-items: center; text-decoration: none; }
.bottone-leggero:hover { color: var(--inchiostro); background: var(--sfondo-cavo); }
.bottone-rimuovi:hover { color: var(--errore); background: var(--errore-velo); }

/* ---------- Messaggi di stato ---------- */

.conferma {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ok);
  background: var(--ok-velo);
  border: 1px solid var(--ok-orlo);
  border-radius: var(--pillola);
  animation: compari 320ms var(--esci);
}
@keyframes compari { from { opacity: 0; translate: 0 -5px; } }

.token { display: grid; gap: 0.375rem; }
.token p:first-child, .token-ok { font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }
.spia { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; }
.token-ok { color: var(--ok); }
.token-ok .spia { background: var(--ok); }
.token-mancante {
  padding: 1rem 1.125rem;
  background: var(--avviso-velo);
  border: 1px solid var(--avviso-orlo);
  border-radius: var(--r-superficie);
}
.token-mancante p:first-child { color: var(--avviso); }
.token-mancante .spia { background: var(--avviso); }
.token-mancante .aiuto { color: var(--testo-tenue); }

.avviso-largo { margin-bottom: 2rem; }
.avviso-largo:not(.token) {
  display: grid;
  gap: 0.375rem;
  padding: 1rem 1.125rem;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-superficie);
}

/* ---------- Stato vuoto ---------- */

.vuoto-grande {
  display: grid;
  justify-items: start;
  gap: 0.625rem;
  padding: 3rem 2rem;
  background: var(--sfondo-cavo);
  border: 1px solid var(--linea);
  border-radius: var(--r-banda);
}
.vuoto-grande > p:first-child { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.012em; }
.vuoto-grande .bottone { margin-top: 0.75rem; }

/* ---------- Domini esclusi ---------- */

.domini {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-superficie);
  overflow: hidden;
}
.domini li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.375rem 0.625rem 0.375rem 1.125rem;
  min-height: 3rem;
}
.domini li + li { border-top: 1px solid var(--linea); }
.dominio { font-size: 0.875rem; overflow-wrap: anywhere; }
.servizio { color: var(--testo-tenue); font-size: 0.9375rem; }
.domini .vuoto { display: block; color: var(--testo-tenue); padding: 0.875rem 1.125rem; }

.aggiungi-dominio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 0.375rem 0.75rem;
  align-items: end;
}
.aggiungi-dominio .errore { grid-column: 1 / -1; }

/* ---------- Settori ---------- */

.settori {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-superficie);
  overflow: hidden;
}
.settore + .settore { border-top: 1px solid var(--linea); }

.settore summary {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.9375rem 1.125rem 0.9375rem 2.375rem;
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: background-color 160ms var(--esci);
}
.settore summary::-webkit-details-marker { display: none; }
.settore summary::before {
  content: "";
  position: absolute;
  left: 1.125rem;
  top: 1.35rem;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid var(--testo-debole);
  border-bottom: 1.5px solid var(--testo-debole);
  rotate: -45deg;
  transition: rotate 220ms var(--esci);
}
.settore[open] summary::before { rotate: 45deg; }
.settore summary:hover { background: var(--sfondo-cavo); }

.settore-nome { font-weight: 600; }
.settore-anteprima {
  color: var(--testo-tenue);
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settore[open] .settore-anteprima { visibility: hidden; }
.spenti { margin-left: 0.5rem; color: var(--testo-debole); }
.etichetta {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--testo-tenue);
  background: var(--sfondo-cavo);
  border: 1px solid var(--linea);
  border-radius: var(--pillola);
  padding: 0.0625rem 0.5rem;
}
.settore-spento .settore-nome { color: var(--testo-tenue); }

.modulo-settore {
  display: grid;
  gap: 1.375rem;
  padding: 0.5rem 1.125rem 1.5rem 2.375rem;
}
.settore-riga {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: end;
}
.settore-riga .spunta { height: 2.5rem; }

.termini { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.termine {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
}
.termine:has(input[type="checkbox"]:not(:checked)) input[type="text"] {
  color: var(--testo-tenue);
  text-decoration: line-through;
  background: var(--sfondo-cavo);
}

.nuovo-settore { display: grid; gap: 1.125rem; padding-top: 0.5rem; }
/* Settore personalizzato dalla schermata Nuova ricerca. */
.nuovo-settore-veloce { display: grid; gap: 0.875rem; padding-top: 0.25rem; }
.nuovo-settore-veloce summary { cursor: pointer; font-size: 0.9375rem; font-weight: 600; }
.nuovo-settore-veloce .aiuto { margin-top: -0.25rem; }

/* ---------- Scelta dei settori ---------- */

.scelte {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-superficie);
  overflow: hidden;
}
.scelte li + li { border-top: 1px solid var(--linea); }
.scelta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8125rem;
  padding: 0.8125rem 1.125rem;
  cursor: pointer;
  font-weight: 400;
  transition: background-color 160ms var(--esci);
}
.scelta:hover { background: var(--accento-velo); }
.scelta:has(input:checked) { background: var(--accento-velo); }
.scelta:has(input:disabled) { cursor: default; color: var(--testo-tenue); }
.scelta:has(input:disabled):hover { background: none; }
.scelta-testo { display: grid; gap: 0.125rem; min-width: 0; }
.scelta-testo strong { font-weight: 600; }
.scelta-dettaglio {
  color: var(--testo-tenue);
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conteggio {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--testo-tenue);
}

/* ---------- Territorio ---------- */

.cerca-zona { position: relative; }
#zone-trovate, #escluse-trovate { position: relative; }

.trovate {
  list-style: none;
  margin: 0.375rem 0 0;
  padding: 0.3125rem;
  position: absolute;
  z-index: var(--z-tendina);
  left: 0;
  right: 0;
  max-height: 18rem;
  overflow-y: auto;
  background: var(--superficie-alta);
  border: 1px solid var(--linea-forte);
  border-radius: var(--r-superficie);
  box-shadow: var(--ombra-sollevata);
  animation: cala 150ms var(--esci);
}
@keyframes cala { from { opacity: 0; translate: 0 -5px; } }

.trovata {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  width: 100%;
  padding: 0.5rem 0.6875rem;
  font: inherit;
  font-size: 0.9375rem;
  text-align: left;
  color: var(--inchiostro);
  background: none;
  border: 0;
  border-radius: var(--r-minimo);
  cursor: pointer;
}
.trovata:hover, .trovata:focus-visible { background: var(--accento-velo); }
.trovata-testo { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.trovata .tipo { color: var(--testo-tenue); font-size: 0.75rem; flex: none; }
.trovata-azione { color: var(--accento); font-size: 0.8125rem; font-weight: 600; flex: none; }
p.trovate { padding: 0.6875rem; color: var(--testo-tenue); font-size: 0.9375rem; }

.zone-scelte { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.zone-scelte:empty { display: none; }
.zona-vuota { margin-top: 0.5rem; }
.zona-vuota[hidden] { display: none; }
.zona {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3125rem 0.375rem 0.3125rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accento);
  background: var(--accento-velo);
  border: 1px solid var(--accento-orlo);
  border-radius: var(--pillola);
}
.zona.esclusa {
  color: var(--errore);
  background: var(--errore-velo);
  border-color: var(--errore-orlo);
}
.zona.esclusa .togli { color: var(--errore); }
.togli {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 160ms var(--esci), color 160ms var(--esci);
}
.togli:hover { background: var(--errore-velo); color: var(--errore); }

/* ---------- Pannello dei conti ---------- */

.pannello {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-banda);
}

/* Striscia di cifre divisa da filetti: niente schedine annidate. */
.conti {
  margin: 0;
  display: grid;
  gap: 1.25rem 0;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}
.conti div {
  display: grid;
  gap: 0.25rem;
  align-content: start;
  padding-left: 1.25rem;
  border-left: 1px solid var(--linea);
}
.conti div:first-child { padding-left: 0; border-left: 0; }
.conti dt {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--testo-tenue);
}
.conti dd {
  margin: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
}
.conti .cifra {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  animation: cambia 240ms var(--esci);
}
@keyframes cambia { from { opacity: 0.3; } }
.cifra .di { font-size: 1.0625rem; font-weight: 500; color: var(--testo-tenue); }
.valuta { font-family: var(--font); font-size: 0.75rem; font-weight: 600; color: var(--testo-tenue); }
.costo-eccessivo { color: var(--errore); }
.conto-lungo { margin-top: -0.75rem; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Il riepilogo è il punto in cui si decide di spendere: cifre più grandi,
   bordo più marcato, pulsante di avvio più alto del resto della pagina. */
#riepilogo .pannello {
  background: var(--superficie-alta);
  border-color: var(--linea-forte);
}
#riepilogo .cifra { font-size: 2rem; }
#riepilogo .azioni .bottone { height: 2.75rem; padding: 0 1.5rem; font-size: 1rem; }

.fatte { margin-top: 0.25rem; }
.fatte summary { cursor: pointer; font-size: 0.9375rem; font-weight: 600; }
.fatte .aiuto { margin: 0.5rem 0 0.875rem; }
.fatte .termini { gap: 0.375rem; font-size: 0.875rem; }

/* ---------- Avanzamento di una ricerca ---------- */

.avanzamento { margin-bottom: 0.5rem; }
.stato {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: start;
  padding: 0.375rem 0.875rem 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--pillola);
  background: var(--sfondo-cavo);
  border: 1px solid var(--linea);
}
.stato .spia { background: var(--testo-tenue); }
.stato-in_corso { color: var(--accento); background: var(--accento-velo); border-color: var(--accento-orlo); }
.stato-in_corso .spia { background: var(--accento); animation: pulsa 1.6s ease-in-out infinite; }
.stato-completata { color: var(--ok); background: var(--ok-velo); border-color: var(--ok-orlo); }
.stato-completata .spia { background: var(--ok); }
.stato-interrotta { color: var(--avviso); background: var(--avviso-velo); border-color: var(--avviso-orlo); }
.stato-interrotta .spia { background: var(--avviso); }
.stato-fallita { color: var(--errore); background: var(--errore-velo); border-color: var(--errore-orlo); }
.stato-fallita .spia { background: var(--errore); }
.azioni-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}
@keyframes pulsa { 50% { opacity: 0.3; } }

.motivo { font-weight: 400; font-size: 0.875rem; color: var(--testo-tenue); }

.barra { height: 0.5rem; background: var(--sfondo-cavo); border-radius: var(--pillola); overflow: hidden; }
.barra span {
  display: block;
  height: 100%;
  background: var(--azione);
  border-radius: inherit;
  transition: width 450ms var(--esci);
}

/* ---------- Tabelle ---------- */

.tabella-scorre {
  overflow-x: auto;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-superficie);
}
.tabella { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tabella th, .tabella td { padding: 0.6875rem 0.875rem; text-align: left; vertical-align: top; }
.tabella thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-riga-fissa);
  background: var(--superficie-alta);
  border-bottom: 1px solid var(--linea-forte);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--testo-tenue);
  white-space: nowrap;
}
.tabella tbody tr + tr td { border-top: 1px solid var(--linea); }
.tabella tbody tr { transition: background-color 120ms var(--esci); }
.tabella tbody tr:hover { background: var(--sfondo-cavo); }
.tabella .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tabella a { text-decoration: none; }
.tabella a:hover { text-decoration: underline; }

.ordina { display: inline-flex; gap: 0.25rem; color: inherit; text-decoration: none; }
.ordina:hover { color: var(--inchiostro); }
.ordina-attiva { color: var(--accento); }
.freccia { font-size: 0.75rem; }

/* Data e ora di avvio: una riga sola, come gli altri numeri della tabella. */
.tabella-storico td:first-child {
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.8125rem;
}

.pallina { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--linea-forte); }
.pallina-in_corso { background: var(--accento); animation: pulsa 1.6s ease-in-out infinite; }
.pallina-completata { background: var(--ok); }
.pallina-fallita { background: var(--errore); }
.pallina-interrotta { background: var(--avviso); }
.motivo-riga { display: block; font-size: 0.75rem; color: var(--testo-tenue); max-width: 26rem; }

/* ---------- Filtri dell'archivio ---------- */

/* Una barra sola, incassata: i filtri si leggono come un blocco di comando. */
.filtri {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding: 1rem 1.125rem;
  background: var(--sfondo-cavo);
  border: 1px solid var(--linea);
  border-radius: var(--r-superficie);
}
.filtri .campo { min-width: 9.5rem; }
.filtri .campo-cerca { flex: 1 1 14rem; min-width: 12rem; max-width: 22rem; }
.filtri .campo-corto { min-width: 6.5rem; max-width: 7.5rem; }
.filtri .bottone-leggero { height: 2.5rem; }
.filtri .bottone { margin-left: auto; }

/* ---------- Tabella dei lead ---------- */

/* La tabella dei lead ha molte colonne: la pagina usa tutta la larghezza e la
   tabella scorre dentro un riquadro, così intestazione ed esiti restano fermi. */
.tabella-scorre.alta { max-height: min(72vh, 48rem); overflow-y: auto; }

.tabella-lead { min-width: 86rem; }
.tabella-lead th, .tabella-lead td { padding: 0.5625rem 0.75rem; vertical-align: middle; }
.spunta-colonna { width: 2.75rem; }

.attivita { min-width: 14rem; max-width: 18rem; }
.attivita strong { font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.008em; }
/* Il nome dell'attività è contenuto, non un invito: resta inchiostro e si
   accende solo al passaggio, altrimenti la colonna è un muro di colore. */
.attivita a { color: inherit; }
.attivita a:hover { color: var(--accento); }
.settore-cella { max-width: 9rem; color: var(--testo-tenue); }
.secondaria {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3125rem;
  margin-top: 0.1875rem;
  font-size: 0.75rem;
  color: var(--testo-tenue);
}
.etichetta-sito { font-size: 0.6875rem; white-space: nowrap; }
a.etichetta-sito { color: var(--accento); text-decoration: none; }
a.etichetta-sito:hover { border-color: var(--accento-orlo); background: var(--accento-velo); }

/* Note ed esiti restano visibili mentre la tabella scorre orizzontalmente. */
.colonna-nota {
  width: 14rem;
  max-width: 18rem;
  position: sticky;
  right: 12.5rem;
  background: var(--superficie);
  border-left: 1px solid var(--linea);
  /* L'ombra dice che sotto c'è altra tabella: senza, l'incolonnamento sembra rotto. */
  box-shadow: var(--ombra-colonna);
  vertical-align: top;
}
.tabella-lead tbody tr:hover .colonna-nota { background: var(--sfondo-cavo); }

.colonna-esiti {
  width: 12.5rem;
  position: sticky;
  right: 0;
  background: var(--superficie);
  border-left: 1px solid var(--linea);
}
.tabella-lead tbody tr:hover .colonna-esiti { background: var(--sfondo-cavo); }
.tabella-lead thead .colonna-nota, .tabella-lead thead .colonna-esiti { background: var(--superficie-alta); }

.zona-cella { max-width: 9rem; }
.sigla { color: var(--testo-debole); font-size: 0.6875rem; font-weight: 600; }

.telefono-cella { white-space: nowrap; }
.telefono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--inchiostro);
  text-decoration: none;
}
.telefono:hover { color: var(--accento); text-decoration: underline; }
.bottone-chiama {
  display: inline-block;
  margin-right: 0.5rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--su-azione);
  text-decoration: none;
  background: var(--azione);
  border-radius: var(--pillola);
  transition: background-color 160ms var(--esci);
}
.bottone-chiama:hover { background: var(--azione-forte); color: var(--su-azione); }
.copia { font-size: 0.75rem; }
.copia:hover { color: var(--accento); background: var(--accento-velo); }
.copia-fatta { color: var(--ok); }
.niente { color: var(--testo-debole); font-size: 0.8125rem; }

.pillola {
  display: inline-block;
  padding: 0.125rem 0.5625rem;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  border-radius: var(--pillola);
  background: var(--sfondo-cavo);
  border: 1px solid var(--linea);
  color: var(--testo-tenue);
}
.pillola-nuovo { background: var(--sfondo-cavo); border-color: var(--linea-forte); color: var(--testo-tenue); }
.pillola-interessato { background: var(--ok-velo); border-color: var(--ok-orlo); color: var(--ok); }
.pillola-da_richiamare { background: var(--avviso-velo); border-color: var(--avviso-orlo); color: var(--avviso); }
.pillola-rifiutato { background: var(--errore-velo); border-color: var(--errore-orlo); color: var(--errore); }

.quando {
  white-space: nowrap;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
}

.nota-cella { min-width: 11rem; }
.nota-blocco > summary { list-style: none; cursor: pointer; }
.nota-blocco > summary::-webkit-details-marker { display: none; }
.nota-riassunto {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--inchiostro);
  text-align: left;
}
.nota-blocco[open] > summary.nota-riassunto {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  margin-bottom: 0.375rem;
  white-space: pre-wrap;
}
.nota-vuota { color: var(--testo-debole); font-style: italic; }
.nota-blocco .nota { margin-top: 0.25rem; }
.nota {
  width: 100%;
  height: 2.125rem;
  padding: 0 0.5625rem;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--inchiostro);
  background: var(--sfondo-cavo);
  border: 1px solid transparent;
  border-radius: var(--r-minimo);
  transition: border-color 160ms var(--esci), background-color 160ms var(--esci);
}
.nota:hover { border-color: var(--linea-forte); }
.nota:focus-visible { background: var(--superficie); border-color: var(--accento); outline-offset: 0; }
.nota::placeholder { color: var(--testo-debole); }
.nota-salvata { border-color: var(--ok); animation: cambia 320ms var(--esci); }

.esiti { display: grid; grid-template-columns: auto auto; gap: 0.3125rem; justify-content: start; }
.lista-chiamate .esiti { display: flex; flex-wrap: wrap; }
.bottone-esito {
  padding: 0.3125rem 0.625rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--testo-tenue);
  background: var(--superficie);
  border: 1px solid var(--linea-forte);
  border-radius: var(--pillola);
  cursor: pointer;
  text-decoration: none;
  transition: color 160ms var(--esci), background-color 160ms var(--esci),
              border-color 160ms var(--esci), translate 120ms var(--esci);
}
.bottone-esito:hover { color: var(--inchiostro); background: var(--sfondo-cavo); border-color: var(--testo-debole); }
.bottone-esito:active { translate: 0 1px; }
.esito-si:hover { color: var(--ok); background: var(--ok-velo); border-color: var(--ok-orlo); }
.esito-no:hover { color: var(--errore); background: var(--errore-velo); border-color: var(--errore-orlo); }

.sotto-tabella {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  padding-top: 1.5rem;
}
.aggiungi-lista { display: flex; align-items: end; gap: 0.75rem; }
.aggiungi-lista .campo { min-width: 18rem; }

.pagine { display: flex; align-items: center; gap: 1rem; padding-top: 1.75rem; }
.pagine span {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--testo-tenue);
  font-variant-numeric: tabular-nums;
}

/* ---------- Liste: schede, creazione, elenco ---------- */

/* Creazione, rinomina ed eliminazione sono un blocco unico e sommesso: stanno
   sopra la tabella ma non devono competere con i dati. */
.riga-lista {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  padding: 1rem 1.125rem;
  background: var(--sfondo-cavo);
  border: 1px solid var(--linea);
  border-radius: var(--r-superficie);
}
.riga-lista form:has(.bottone-rimuovi) { margin-left: auto; }
.rinomina, .crea-lista, .contatto-manuale { display: flex; align-items: end; gap: 0.75rem; }
.rinomina input, .crea-lista input { width: 18rem; }
.contatto-manuale input[name="nome"] { width: 12rem; }
.contatto-manuale input[name="telefono"] { width: 11rem; }
.crea-lista-pagina {
  margin-bottom: 2rem;
  padding: 1rem 1.125rem;
  background: var(--sfondo-cavo);
  border: 1px solid var(--linea);
  border-radius: var(--r-superficie);
}

.scelta-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 1.5rem;
}
.scelta-lista {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4375rem;
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--linea);
  border-radius: var(--pillola);
  background: var(--superficie);
  color: var(--inchiostro);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 160ms var(--esci), background-color 160ms var(--esci), border-color 160ms var(--esci);
}
.scelta-lista:hover { border-color: var(--accento-orlo); background: var(--accento-velo); color: var(--accento); }
.scelta-lista-attiva {
  border-color: transparent;
  background: var(--azione);
  color: var(--su-azione);
  font-weight: 600;
}
.scelta-lista-attiva:hover { background: var(--azione-forte); color: var(--su-azione); border-color: transparent; }
.scelta-lista .secondaria {
  display: inline;
  margin: 0;
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--testo-tenue);
}
.scelta-lista-attiva .secondaria { color: oklch(1 0 0 / 0.75); }

.azioni-lista { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.elenco-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-superficie);
  overflow: hidden;
}
.elenco-liste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 1rem 0.25rem 0;
  transition: background-color 120ms var(--esci);
}
.elenco-liste li:hover { background: var(--sfondo-cavo); }
.elenco-liste li + li { border-top: 1px solid var(--linea); }
.elenco-liste li > a:first-child {
  display: grid;
  gap: 0.125rem;
  flex: 1;
  padding: 0.9375rem 1.125rem;
  color: var(--inchiostro);
  text-decoration: none;
}
.elenco-liste li > a:first-child:hover { color: var(--accento); }
.elenco-liste strong { font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
.elenco-liste .secondaria { margin: 0; }

/* ---------- Da richiamare e interessati ---------- */

.lista-chiamate {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-superficie);
  overflow: hidden;
}
.chiamata {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.875rem 1.75rem;
  padding: 1.125rem 1.375rem;
  transition: background-color 120ms var(--esci);
}
.chiamata:hover { background: var(--sfondo-cavo); }
.chiamata + .chiamata { border-top: 1px solid var(--linea); }
.chiamata-chi strong { font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.015em; }
.chiamata-chi a { color: inherit; text-decoration: none; }
.chiamata-chi a:hover { color: var(--accento); text-decoration: underline; }
.chiamata-nota {
  margin-top: 0.5rem;
  padding: 0.3125rem 0.625rem;
  font-size: 0.875rem;
  color: var(--avviso);
  background: var(--avviso-velo);
  border: 1px solid var(--avviso-orlo);
  border-radius: var(--r-minimo);
  display: inline-block;
}
.chiamata-quando {
  display: grid;
  gap: 0.125rem;
  justify-items: end;
  text-align: right;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.chiamata-quando .secondaria { margin: 0; }
/* L'ora del richiamo è il dato che si cerca scorrendo l'elenco. */
.ora-richiamo {
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--inchiostro);
}
.telefono-grande { font-size: 1.0625rem; font-weight: 600; white-space: nowrap; }
.chiamata-numero {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}
.lista-chiamate .esiti { grid-column: 1 / -1; gap: 0.375rem; }

.modulo-richiamo { max-width: 32rem; }
.modulo-richiamo fieldset .aiuto { margin-top: 0.25rem; }

/* ---------- Login remoto ---------- */

.pagina-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--sfondo);
}
.login-scatola {
  width: min(100%, 22rem);
  padding: 1.75rem 1.5rem;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-banda);
  box-shadow: var(--ombra-sollevata);
}
.login-scatola h1 { margin: 0 0 0.35rem; font-size: 1.375rem; }
.modulo-login { display: grid; gap: 1rem; margin-top: 1.25rem; }
.modulo-login .bottone { width: 100%; min-height: 2.75rem; }

/* Filtri pieghevoli: su desktop il summary è nascosto e il form resta visibile. */
.filtri-piega {
  margin: 0 0 1.25rem;
  border: 0;
}
.filtri-piega > summary {
  display: none;
  list-style: none;
}
.filtri-piega > summary::-webkit-details-marker { display: none; }

/* ---------- Schermi stretti ---------- */

@media (max-width: 64rem) {
  .testata-interno { flex-wrap: wrap; gap: 0.75rem; }
  .menu-principale { flex-basis: 100%; order: 3; }
  .menu { width: 100%; }
  .strumenti-testata { margin-left: auto; }
}

@media (max-width: 52rem) {
  /* Sticky desktop: su stretto coprono telefono e card. */
  .colonna-nota,
  .colonna-esiti {
    position: static;
    right: auto;
    width: auto;
    max-width: none;
    box-shadow: none;
    border-left: 0;
    background: transparent;
  }
  .tabella-lead tbody tr:hover .colonna-nota,
  .tabella-lead tbody tr:hover .colonna-esiti { background: transparent; }

  .chiamata { grid-template-columns: minmax(0, 1fr) auto; }
  .chiamata-quando { grid-column: 2; grid-row: 1; }
  .chiamata-numero { grid-column: 1 / -1; }
  .esiti { grid-column: 1 / -1; }
  .sotto-tabella { display: grid; gap: 1rem; }
  .aggiungi-lista { display: grid; }
  .aggiungi-lista .campo { min-width: 0; }
  .rinomina input, .crea-lista input,
  .contatto-manuale input[name="nome"],
  .contatto-manuale input[name="telefono"] { width: 100%; }
  .riga-lista, .rinomina, .crea-lista, .contatto-manuale { display: grid; }
  .conti div { padding-left: 0; border-left: 0; }
  .filtri .bottone { margin-left: 0; }
}

@media (max-width: 40rem) {
  .contenuto { padding: 1.5rem 1rem 4rem; }
  .testata-interno { padding: 0.625rem 1rem; }
  .capo { margin-bottom: 1.5rem; }
  .contatore-valore { min-width: 0; }
  .contatore-etichetta { display: none; }
  .aggiungi-dominio, .settore-riga { grid-template-columns: minmax(0, 1fr); }
  .aggiungi-dominio .bottone { justify-self: start; }
  .domini li { grid-template-columns: minmax(0, 1fr) auto; }
  .domini .servizio { grid-row: 2; font-size: 0.8125rem; }
  .domini li form { grid-row: 1 / 3; grid-column: 2; }
  .settore summary { grid-template-columns: auto minmax(0, 1fr); }
  .settore-anteprima { grid-column: 1 / -1; }
  .modulo-settore { padding-left: 1.125rem; }
  .vuoto-grande { padding: 2rem 1.25rem; }
  .pannello { padding: 1.125rem; }

  .filtri-piega {
    border: 1px solid var(--linea);
    border-radius: var(--r-superficie);
    background: var(--superficie);
    padding: 0;
  }
  .filtri-piega > summary {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.625rem 1rem;
    font-weight: 600;
    cursor: pointer;
  }
  .filtri-piega[open] > summary {
    border-bottom: 1px solid var(--linea);
  }
  .filtri-piega .filtri {
    margin: 0;
    padding: 1rem;
    border: 0;
    background: transparent;
  }

  /* Lead, contatti, storico: card. Senza max-height: il blocco dopo
     (Aggiungi lista / CSV) finiva a metà delle card overflow. */
  .tabella-scorre,
  .tabella-scorre.alta {
    max-height: none;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  .tabella-lead,
  .tabella-contatti,
  .tabella-storico {
    min-width: 0;
    width: 100%;
  }
  .tabella-lead thead,
  .tabella-contatti thead,
  .tabella-storico thead { display: none; }
  .tabella-lead tbody,
  .tabella-contatti tbody,
  .tabella-storico tbody,
  .tabella-lead tr,
  .tabella-contatti tr,
  .tabella-storico tr,
  .tabella-lead td,
  .tabella-contatti td,
  .tabella-storico td {
    display: block;
    width: 100%;
    position: static;
  }
  .tabella-lead tr,
  .tabella-contatti tr,
  .tabella-storico tr {
    margin: 0 0 0.875rem;
    padding: 1rem;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--r-superficie);
    box-shadow: var(--ombra-sollevata);
  }
  .tabella-lead td,
  .tabella-contatti td,
  .tabella-storico td {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 0.5rem 0.75rem;
    align-items: start;
    padding: 0.4rem 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .tabella-lead .telefono-cella { white-space: normal; }
  .tabella-lead .colonna-nota,
  .tabella-lead .colonna-esiti {
    position: static;
    right: auto;
    width: auto;
    max-width: none;
    box-shadow: none;
    border-left: 0;
    background: transparent;
  }
  .sotto-tabella {
    display: grid;
    gap: 1rem;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--linea);
    position: relative;
    z-index: 0;
  }
  .tabella-lead td::before,
  .tabella-contatti td::before,
  .tabella-storico td::before {
    content: attr(data-etichetta);
    color: var(--testo-tenue);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding-top: 0.2rem;
  }
  .tabella-storico .num { text-align: left; }
  .tabella-lead .attivita,
  .tabella-lead .telefono-cella,
  .tabella-lead .colonna-esiti,
  .tabella-contatti td[data-etichetta="Azioni"] {
    grid-template-columns: 1fr;
  }
  .tabella-lead .attivita::before,
  .tabella-lead .telefono-cella::before,
  .tabella-lead .colonna-esiti::before,
  .tabella-contatti td[data-etichetta="Azioni"]::before { display: none; }
  .tabella-lead .spunta-colonna {
    grid-template-columns: auto 1fr;
    padding-bottom: 0.75rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--linea);
  }
  .tabella-lead .telefono-cella {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: 0.75rem 0;
  }
  .tabella-lead .bottone-chiama,
  .tabella-lead .bottone-esito,
  .chiamata .bottone-chiama,
  .chiamata .bottone-esito {
    min-height: 2.75rem;
    padding: 0.625rem 0.9rem;
    font-size: 1rem;
  }
  .tabella-lead .telefono { font-size: 1.0625rem; }
  .tabella-lead .esiti {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: 100%;
  }
  .tabella-lead .esiti .bottone-esito { width: 100%; justify-content: center; }
  .tabella-contatti .azioni-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .tabella-contatti .azioni-inline .bottone-leggero {
    min-height: 2.75rem;
  }
  .aree a, .menu a, .tema, .bottone, .bottone-secondario {
    min-height: 2.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}