:root {
  --bg: #faf6f0;
  --surface: #ffffff;
  --surface-2: #f7f2ea;
  --border: #ece3d6;
  --text: #201b17;
  --text-muted: #7a7067;
  --primary: #114b7a;
  --primary-dark: #0b3457;
  --primary-soft: #e3ecf3;
  --accent: #e8623d;
  --accent-dark: #cc4b28;
  --accent-soft: #fbe6dd;
  --success: #0d8a5f;
  --success-soft: #e2f7ec;
  --warn: #f5a524;
  --danger: #ef4444;
  --danger-soft: #fdecec;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(32, 27, 23, 0.06);
  --shadow-md: 0 8px 24px -8px rgba(17, 33, 48, 0.18);
  --shadow-lg: 0 16px 40px -12px rgba(17, 33, 48, 0.24);
  --banner-image: none;
  --banner2-color: none;
}

/* due categorie sbloccabili nello Store (Profilo), scelte indipendenti. Si vedono SOLO su
   superfici tipo card (vedi .card e #clienti-hub più sotto) - lo sfondo vero e proprio dell'app
   (body::before, poco più sotto) resta sempre fisso, non cambia mai coi banner/colori scelti.
   - "Banner" (--banner-image, [data-banner]): foto vere - solo sulla card "Aziende
     rappresentate" in Home e sulle piastrelle della hub Clienti (vedi .banner-1/.clienti-hub-tile
     più sotto).
   - "Banner classici" (--banner2-color, [data-banner2]): tinte piatte tenui, non più foto (erano
     confusionarie su tante superfici diverse) - il default per (quasi) tutte le altre card
     dell'app, sempre testo scuro leggibile perché sono tutte scelte chiare apposta. */
[data-banner2="sabbia"] { --banner2-color: #f3ead9; }
[data-banner2="cielo-tenue"] { --banner2-color: #dce8f0; }
[data-banner2="terracotta"] { --banner2-color: #f5ddd2; }
[data-banner2="salvia"] { --banner2-color: #e1ece2; }
[data-banner2="lavanda"] { --banner2-color: #e6e1ee; }
[data-banner2="perla"] { --banner2-color: #e9e6e1; }
[data-banner2="ambra"] { --banner2-color: #f7e6c4; }
[data-banner="cielo"] { --banner-image: url('../img/sfondi/cielo.jpg'); }
[data-banner="fibra-carbonio"] { --banner-image: url('../img/sfondi/fibra-carbonio.jpg'); }
[data-banner="legno-chiaro"] { --banner-image: url('../img/sfondi/legno-chiaro.jpg'); }
[data-banner="legno-scuro"] { --banner-image: url('../img/sfondi/legno-scuro.jpg'); }
[data-banner="leopardo"] { --banner-image: url('../img/sfondi/leopardo.jpg'); }
[data-banner="maldive"] { --banner-image: url('../img/sfondi/maldive.jpg'); }
[data-banner="oro"] { --banner-image: url('../img/sfondi/oro.jpg'); }
[data-banner="oro-leopardo"] { --banner-image: url('../img/sfondi/oro-leopardo.jpg'); }

/* temi sbloccabili nello Store (Profilo) - ricolorano solo primario/accento e le loro varianti,
   sfondo/testo/colori semantici (successo/avviso/errore) restano invariati in ogni tema */
[data-tema="foresta"] {
  --primary: #1a7a4c;
  --primary-dark: #125a38;
  --primary-soft: #e1f3e8;
  --accent: #d9822b;
  --accent-dark: #b5691d;
  --accent-soft: #fbe9d4;
}
[data-tema="tramonto"] {
  --primary: #c2452f;
  --primary-dark: #9c3623;
  --primary-soft: #fbe4de;
  --accent: #1c8f8f;
  --accent-dark: #136e6e;
  --accent-soft: #dff3f3;
}
[data-tema="notte"] {
  --primary: #4c3fae;
  --primary-dark: #382e82;
  --primary-soft: #e7e4f7;
  --accent: #e0a030;
  --accent-dark: #b57f22;
  --accent-soft: #fbf0da;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

body {
  min-height: 100vh;
  padding-bottom: 84px;
  position: relative;
}

/* sfondo con profondità: macchie mediterranee sfumate e ferme, non un grigio/bianco piatto.
   Fisso, sempre lo stesso colore dell'app - i banner scelti nello Store (vedi --banner-image)
   NON toccano questo livello, si vedono solo su superfici tipo card (.card, #clienti-hub) più
   sotto nel file: due concetti distinti, "sfondo" (questo, invariabile) e "banner" (quello). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(620px 460px at 8% -10%, rgba(17, 75, 122, 0.24), transparent 62%),
    radial-gradient(520px 420px at 105% 4%, rgba(232, 98, 61, 0.20), transparent 60%),
    radial-gradient(680px 520px at 50% 118%, rgba(17, 75, 122, 0.16), transparent 62%),
    radial-gradient(420px 340px at 90% 70%, rgba(232, 98, 61, 0.10), transparent 60%),
    var(--bg);
}

.app-shell {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(64px + env(safe-area-inset-top, 0px)) 16px 0;
}

/* ---------- header ---------- */

.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: calc(10px + env(safe-area-inset-top, 0px)) 0 12px;
}

.app-header-row {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-logo {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

/* badge del tier più alto raggiunto (traguardi + badge extra Store), in basso a destra sul logo */
.app-logo-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--surface);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
}

.app-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.app-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: -2px;
}

.btn-profilo-header {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

/* ---------- views ---------- */

.view { display: none; animation: fade-in .18s ease; }
.view.attiva { display: block; }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.card.traguardo-card {
  text-align: center;
  position: relative;
  overflow: hidden;
  background-color: #0e0e0e;
  background-image:
    linear-gradient(27deg, #050505 5px, transparent 5px),
    linear-gradient(207deg, #050505 5px, transparent 5px),
    linear-gradient(27deg, #050505 5px, transparent 5px),
    linear-gradient(207deg, #050505 5px, transparent 5px),
    linear-gradient(90deg, #161616 10px, transparent 10px),
    linear-gradient(#161616 25%, #1e1e1e 25%, #1e1e1e 50%, #161616 50%, #161616 75%, #1e1e1e 75%, #1e1e1e 100%);
  background-size: 20px 20px;
  background-position: 0 0, 0 0, 10px 10px, 10px 10px, 0 0, 0 0;
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(212, 175, 55, 0.06);
}

.card.traguardo-card::after {
  content: '';
  position: absolute;
  inset: -60% -20%;
  background: linear-gradient(115deg, transparent 42%, rgba(212, 175, 55, 0.14) 50%, transparent 58%);
  pointer-events: none;
}

.traguardo-card > * {
  position: relative;
}

.traguardo-trofeo {
  font-size: 38px;
  line-height: 1;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 10px rgba(212, 175, 55, 0.55));
}

.traguardo-card .card-titolo {
  color: #e3c877;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
}

.traguardo-card .stat-num {
  background: linear-gradient(180deg, #f9edb8 0%, #d4af37 55%, #a9791f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.traguardo-card .card-sotto {
  color: #a8925f;
}

.traguardo-anima {
  animation: traguardo-pop .5s cubic-bezier(.26, 1.4, .5, 1);
}

@keyframes traguardo-pop {
  0% { opacity: 0; transform: scale(.85); }
  60% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

/* stile alternativo "dorato" per la card traguardo (sbloccabile nello Store) - foto vera al
   posto del vecchio gradiente piatto "oro pieno" (rimosso, sostituito da questo) */
.card.traguardo-card.stile-dorato {
  background-color: #3a2a0a;
  background-image: url('../img/sfondi/oro.jpg');
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.traguardo-card.stile-dorato::after { display: none; }
.traguardo-card.stile-dorato .card-titolo { color: #3a2a0a; }
.traguardo-card.stile-dorato .stat-num {
  background: linear-gradient(180deg, #ffffff 0%, #3a2a0a 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.traguardo-card.stile-dorato .card-sotto { color: #5a4315; }

/* stile alternativo "leopardato" per la card traguardo (foto) */
.card.traguardo-card.stile-leopardato {
  background-color: #1a1208;
  background-image: url('../img/sfondi/leopardo.jpg');
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.traguardo-card.stile-leopardato::after { display: none; }
.traguardo-card.stile-leopardato .card-titolo,
.traguardo-card.stile-leopardato .card-sotto {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.traguardo-card.stile-leopardato .stat-num {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* stile alternativo "spiaggia" per la card traguardo (foto Maldive) */
.card.traguardo-card.stile-spiaggia {
  background-color: #eaf6f6;
  background-image: url('../img/sfondi/maldive.jpg');
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.traguardo-card.stile-spiaggia::after { display: none; }
.traguardo-card.stile-spiaggia .traguardo-trofeo { filter: none; }
.traguardo-card.stile-spiaggia .card-titolo { color: #0b4a5a; text-shadow: 0 1px 2px rgba(255,255,255,.7); }
.traguardo-card.stile-spiaggia .stat-num {
  background: linear-gradient(180deg, #ffffff 0%, #0e6e83 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.traguardo-card.stile-spiaggia .card-sotto { color: #0b4a5a; text-shadow: 0 1px 2px rgba(255,255,255,.7); }

/* stile alternativo "minimal" per la card traguardo (sbloccabile nello Store) */
.card.traguardo-card.stile-minimal {
  background-color: var(--surface);
  background-image: none;
  border: 2px solid var(--primary);
  box-shadow: var(--shadow-sm);
}
.traguardo-card.stile-minimal::after { display: none; }
.traguardo-card.stile-minimal .traguardo-trofeo { filter: none; }
.traguardo-card.stile-minimal .card-titolo { color: var(--primary); }
.traguardo-card.stile-minimal .stat-num {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: var(--primary);
}
.traguardo-card.stile-minimal .card-sotto { color: var(--text-muted); }

/* ---------- schermata di accesso/onboarding (profilazione) ---------- */

.schermata-accesso {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px calc(20px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
}
.schermata-accesso.aperta { display: flex; }

.schermata-accesso-box {
  width: 100%;
  max-width: 380px;
  max-height: 84vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  text-align: center;
}

.schermata-accesso-titolo {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--text);
}

.schermata-accesso-errore {
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  margin: 14px 0 0;
}

.onboarding-tipo-riga {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.onboarding-cerchio {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 10px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.onboarding-cerchio-emoji { font-size: 28px; }
.onboarding-cerchio.attivo {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-dark);
}

/* pad PIN a 4 pallini: input numerico vero ma invisibile sopra i pallini, tocca/digita lì mentre
   guardi i pallini riempirsi - tastiera numerica nativa (inputmode="numeric"), niente tastierino
   disegnato a mano */
.pin-pad {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 28px 0 6px;
  padding: 4px 0;
}
.pin-pad.trema { animation: pin-trema .35s ease; }
@keyframes pin-trema {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}
.pin-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface-2);
  transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.pin-dot.pieno {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 0 5px var(--primary-soft);
  transform: scale(1.08);
}
.pin-input-nascosto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: none;
  padding: 0;
  margin: 0;
  text-align: center;
  letter-spacing: 8px;
}

.link-testuale {
  display: inline-block;
  background: none;
  border: none;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font-family: inherit;
  padding: 4px;
}

.onboarding-lingua-riga {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 10px;
}

.onboarding-bolla-lingua {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.onboarding-bolla-lingua.attiva {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

/* piani abbonamento (onboarding) */

.piano-card {
  text-align: left;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-top: 10px;
  cursor: pointer;
}
.piano-card.selezionato {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.piano-nome { font-weight: 800; font-size: 15px; }
.piano-prezzo { font-size: 13px; color: var(--text-muted); margin: 2px 0 8px; }
.piano-lista { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--text); }
.piano-lista li { margin-bottom: 2px; }

/* ---------- cards ---------- */

/* di default ogni card mostra "Banner classici" (--banner2-color, una tinta piatta tenue) - è
   la categoria prevalente richiesta ovunque (Home, Profilo, Chiamate/Agenda/Cataloghi mai
   nominate esplicitamente seguono lo stesso schema). La sola eccezione (card "Aziende
   rappresentate" in Home) aggiunge la classe .banner-1 in più, che vince perché dichiarata dopo
   .card qui sotto - lì si vede invece "Banner" (foto vere). */
.card {
  background-color: var(--banner2-color, var(--surface));
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  margin-bottom: 14px;
}
/* SEMPRE un'unica immagine intera, mai a ripetizione, su qualsiasi superficie e qualsiasi banner -
   nessuna eccezione "texture" più: sono foto vere (carbonio/legno/leopardo/oro), non trame
   perfettamente ripetibili - piastrellate mostravano un taglio visibile ad ogni giunzione,
   "un macello" a prescindere da quale elemento venisse piastrellato. Stesso trattamento di
   Cielo/Maldive per tutti. */
.banner-1 {
  background-color: var(--surface);
  background-image: var(--banner-image);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* "Banner classici" (tinte piatte) restano testo scuro di sempre, nessuna logica di leggibilità
   necessaria lì. Per "Banner" (foto vere, categoria 1) i titoli/etichette non sono più testo CSS
   con text-shadow indovinato caso per caso: sono disegnati come SVG con contorno vero (bianco +
   bordo nero, vedi .testo-contorno-svg più sotto) - leggibili su QUALSIASI foto senza dover
   decidere chiaro/scuro banner per banner. */

.card-titolo {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
}

.card-sotto {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.stat-card {
  background-color: var(--banner2-color, var(--surface));
  border-radius: var(--radius-md);
  padding: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.stat-num {
  font-size: 26px;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.placeholder-card {
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  color: var(--text-muted);
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.badge-presto {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-dark);
  background: var(--primary-soft);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- buttons ---------- */

.btn {
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 6px 16px -4px rgba(91, 91, 240, 0.45);
}
.btn-primary:hover { background: var(--primary-dark); }

.btn-secondary {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-accent {
  background: var(--success);
  color: #fff;
  box-shadow: 0 6px 16px -4px rgba(13, 138, 95, 0.4);
}

.btn-block { width: 100%; }
.btn-sm { padding: 8px 12px; font-size: 13px; border-radius: 8px; }

.fab {
  position: fixed;
  right: 20px;
  bottom: 92px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 26px;
  border: none;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 30;
}

/* bottone fisso "+ Aggiungi evento" - stesso principio del FAB ma largo/con etichetta, resta
   visibile scorrendo la lista eventi (vedi #lista-eventi, ha un padding-bottom apposta per non
   restarci nascosta l'ultima card sotto) */
.btn-aggiungi-evento {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  max-width: 528px;
  margin: 0 auto;
  z-index: 30;
  box-shadow: var(--shadow-lg);
}
.fab:active { transform: scale(0.94); }

/* cerchio "Ricerca" nella hub Clienti - stessa dimensione/altezza del "+" principale, subito
   alla sua sinistra (Mercato/Discover sono piastrelle nella griglia, non cerchi separati) */
.fab-secondario { right: 88px; }

/* ---------- bottom nav ---------- */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-around;
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
  z-index: 25;
}

.nav-item {
  border: none;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--text-muted);
  font-size: 11px;
  font-family: inherit;
  padding: 4px 10px;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
}
.nav-item .nav-icon { font-size: 20px; }
.nav-item.attivo { color: var(--primary-dark); font-weight: 700; }
.nav-item.disabilitato { opacity: 0.4; cursor: default; }

/* ---------- form ---------- */

.campo {
  margin-bottom: 14px;
}
.campo label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  font-size: 14.5px;
  font-family: inherit;
  background: var(--surface-2);
  color: var(--text);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
}
.campo-riga { display: flex; gap: 10px; }
.campo-riga .campo { flex: 1; }
.campo-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  cursor: pointer;
}
.campo-checkbox input { width: 17px; height: 17px; cursor: pointer; }

.chip-scelta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface-2);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.chip-scelta.selezionato {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-dark);
  font-weight: 600;
}
.chip-riga { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- liste clienti ---------- */

.segmented {
  display: flex;
  background: var(--surface-2);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
}
.segmented button {
  flex: 1;
  min-width: 0; /* senza questo, un flex item non si restringe mai sotto la larghezza naturale del
                   suo testo - con molti bottoni (es. le 5 schede del cliente) l'ultimo "esce"
                   fuori dal contenitore invece di restringersi con gli altri */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: none;
  background: none;
  padding: 9px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
}
/* 5 schede invece delle solite 2-3 (Dati/Aziende/Andamento/Organigramma/Storico) - un filo più
   strette per stare tutte su una riga senza troncare troppo le etichette più lunghe */
#segmented-scheda-cliente button {
  padding: 9px 4px;
  font-size: 11.5px;
}
.segmented button.attivo {
  background: var(--surface);
  color: var(--primary-dark);
  box-shadow: var(--shadow-sm);
}

/* hub Clienti (Elenco/Urgenze/Nuovi/Eventi/Mercato/Discover) - centrato a metà schermo, piastrelle
   grosse. Lo sfondo del CONTENITORE resta sempre il colore dell'app, nessun banner qui dietro
   (deciso così, non un default per dimenticanza) - il banner ("Banner", categoria 1, le foto
   vivide) si vede SOLO dentro le singole piastrelle, vedi .clienti-hub-tile più sotto. */
#clienti-hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 220px);
  border-radius: var(--radius-lg);
}
#clienti-hub-mascotte {
  width: 96px;
  height: 96px;
  margin-bottom: 8px;
}
.clienti-hub-griglia {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 300px;
}
.clienti-hub-tile {
  /* è un <button>: senza azzerare l'aspetto nativo, alcuni browser mobile disegnano una loro
     "chrome" di sistema sopra lo sfondo scelto via CSS - protezione difensiva, non era la causa
     reale del "non vedo il banner" (quella era semplicemente "Banner classici" su "Nessuno" nello
     Store). Usa "Banner" (categoria 1, le foto vivide), non "Banner classici" come il resto
     dell'app - unica eccezione richiesta esplicitamente, insieme alla card "Aziende rappresentate". */
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 1.2;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  background-image: var(--banner-image);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.clienti-hub-tile:active { transform: scale(0.97); }
.clienti-hub-tile:disabled { opacity: .55; cursor: default; }
.clienti-hub-tile-disabilitata { opacity: .55; }
.clienti-hub-tile-icona { font-size: 26px; }

/* hub Chiamate - stesso linguaggio dell'hub Clienti: mascotte + un'unica piastrella grande che
   porta alla configurazione del giro (banner vivido, .banner-1, la stessa classe già usata per
   "Aziende rappresentate" - qui è tutta la piastrella, non solo un badge) */
#chiamate-hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 220px);
}
#chiamate-hub-mascotte {
  width: 96px;
  height: 96px;
  margin-bottom: 8px;
}
.chiamate-hub-piastrella {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1.3;
  cursor: pointer;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
}
.chiamate-hub-piastrella-icona { font-size: 44px; }

/* hub Posti di fiducia - stesso linguaggio di Clienti/Chiamate (mascotte + piastrelle che si
   aprono solo al click), rettangoli separati col layout solito (niente forme "fantasiose": provate
   e scartate dall'utente) - vedi .posti-pila/.posti-tile più sotto */
#posti-hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 220px);
}
#posti-hub-mascotte {
  width: 96px;
  height: 96px;
  margin-bottom: 8px;
}
/* a centro pagina, sia in orizzontale che in verticale (più in basso, non appena sotto "Indietro") -
   stessa idea di un "prima" e un "dopo" come in Home, solo verticale invece che tutta la pagina */
#posti-sotto-hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

/* hub Ordini - stesso identico linguaggio di Posti (mai una schermata a parte "diversa"): hub
   centrato come #posti-hub, e la pagina "invio agli ordini" (piastrelle aziende) centrata come
   #posti-sotto-hub, con le piastrelle grandi (.posti-tile-grande) come Hotel/Ristoranti */
#ordini-hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 220px);
}
#ordini-hub-mascotte {
  width: 96px;
  height: 96px;
  margin-bottom: 8px;
}
#ordini-invio-aziende {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

/* pila di rettangoli separati (bordo arrotondato/ombra come le altre card dell'app), uno sopra
   l'altro con un po' di distanza - usata sia dall'hub principale (Aggiungi posto/I miei posti) sia
   da Hotel/Ristoranti (via .posti-tile-grande, sotto) */
.posti-pila {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}
.posti-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 88px;
  padding: 16px 22px;
  border: none;
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.posti-tile:active { transform: scale(0.98); }
.posti-tile-icona { font-size: 32px; flex-shrink: 0; }
.posti-tile-grande {
  min-height: 170px;
  font-size: 20px;
  background-size: cover;
  background-position: center;
}
.posti-tile-grande .posti-tile-icona { font-size: 44px; }

/* Hotel/Ristoranti: foto dedicate caricate apposta per queste due piastrelle (non la scelta
   globale "Banner" usata altrove - qui è fissa, sempre quella). */
.posti-tile-hotel { background-image: url('../img/sfondi/banner-hotel.jpg'); }
.posti-tile-ristoranti { background-image: url('../img/sfondi/banner-ristoranti.jpg'); }

/* testo bianco con contorno nero vero, disegnato in SVG (stroke+fill con paint-order) invece che
   con CSS text-stroke/text-shadow sulle lettere normali: quella strada lasciava le linee del
   contorno "sforare" nei punti dove i tratti delle lettere si incrociano (dentro una "A", una "R")
   perché più ombre sovrapposte non si compongono in un bordo pulito. SVG risolve la cosa alla
   radice: stroke-linejoin:round arrotonda gli angoli e paint-order:stroke fill disegna il bordo
   PRIMA del riempimento, un contorno netto senza libreria di font esterna. */
/* testo bianco con contorno nero vero, disegnato in SVG (stroke+fill, paint-order) invece che con
   CSS text-stroke/text-shadow su testo normale - quella strada lasciava le linee del contorno
   "sforare" nei punti dove i tratti delle lettere si incrociano (dentro una "A", una "R").
   Riusata ovunque c'è testo sopra una foto "Banner" vera (Aziende rappresentate, piastrelle
   Clienti, piastrella Chiamate, Hotel/Ristoranti in Posti) - stessa resa ovunque, zero da
   indovinare banner per banner. Dimensione per contesto via le variabili CSS --tc-font-size/
   --tc-altezza impostate inline su ogni <svg>, non una classe diversa per ogni caso. */
.testo-contorno-svg { height: var(--tc-altezza, 26px); width: auto; overflow: visible; flex-shrink: 0; }
.testo-contorno-svg text {
  font-family: inherit;
  font-weight: 800;
  font-size: var(--tc-font-size, 22px);
  fill: #fff;
  stroke: #000;
  stroke-width: calc(var(--tc-font-size, 22px) * 0.16);
  stroke-linejoin: round;
  paint-order: stroke fill;
}

/* griglia a riquadri dello Store (Profilo > Punti) */
.store-griglia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.store-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.store-tile-icona { font-size: 22px; }
.store-tile.attivo {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-dark);
}

.gruppo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4px;
  cursor: pointer;
}
.gruppo-titolo { font-size: 14.5px; font-weight: 700; }
.gruppo-count {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--surface-2);
  padding: 2px 9px;
  border-radius: 999px;
}
.gruppo-corpo { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.gruppo-corpo.chiuso { display: none; }

.cliente-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.cliente-emoji-stato {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 20px;
  line-height: 1;
}
.cliente-avatar {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.cliente-nome { font-weight: 700; font-size: 14.5px; }

/* Elenco clienti: stessa card di sempre (.cliente-card), solo più grande/spaziosa - stesse
   icone/info (vedi contenutoClienteCard in clienti.js), niente perso. In più un pulsantino per
   aprire la carta 3D come bonus, senza sostituire il tocco diretto sulla scheda vera. SOLO qui,
   Urgenze/Nuovi/eventi restano con .cliente-card, invariata. */
.cliente-tile-elenco {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.cliente-tile-elenco:active { transform: scale(0.99); }
.cliente-tile-elenco .cliente-avatar { width: 46px; height: 46px; font-size: 16px; }
.cliente-tile-elenco .cliente-nome { font-size: 16px; }
.cliente-tile-elenco .cliente-indirizzo { font-size: 13.5px; }
.btn-carta-3d-mini {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* griglia "Aziende rappresentate" in Home - quadrati, 3 per riga, vanno a capo da soli */
.aziende-griglia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.azienda-tile {
  position: relative;
  aspect-ratio: 1;
  border: none;
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--primary-dark);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  overflow: hidden;
  font-family: inherit;
}
/* "contain" invece di "cover": il logo si vede SEMPRE per intero, rimpicciolito quanto serve -
   niente più bordi tagliati per i loghi non quadrati. Un po' di margine (inset 6px, non 0) dà
   respiro invece di toccare gli spigoli del riquadro. */
.azienda-tile img {
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  object-fit: contain;
}
.azienda-tile-iniziali {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
}
.azienda-tile-nome {
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cliente-indirizzo { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.cliente-tag-riga { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
}
.tag-azienda { background: var(--primary-soft); color: var(--primary-dark); }
.tag-warn { background: #fff4e0; color: #a86400; }
.tag-ok { background: var(--success-soft); color: var(--success); }

.badge-completato {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success);
  white-space: nowrap;
  flex-shrink: 0;
}

.badge-attivita {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  vertical-align: middle;
}
.badge-attivita.attivo { background: var(--success-soft); color: var(--success); }
.badge-attivita.inattivo { background: var(--surface-2); color: var(--text-muted); }
.badge-attivita.nuovo { background: var(--primary-soft); color: var(--primary-dark); }

.stato-vuoto {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}
.stato-vuoto .emoji { font-size: 40px; display: block; margin-bottom: 10px; }

/* ---------- modale ---------- */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 40, 0.45);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
  backdrop-filter: blur(2px);
}
.overlay.aperto { display: flex; }

.modale {
  background: var(--surface);
  width: 100%;
  max-width: 560px;
  border-radius: 22px 22px 0 0;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain; /* arrivati in fondo, non deve scrollare quello che c'è sotto */
  animation: sali-su .22s ease;
}
@keyframes sali-su {
  from { transform: translateY(24px); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}

/* REGOLA FISSA: qualsiasi area che scrolla per conto suo DENTRO un popup (select multiple,
   textarea con testo lungo, liste di risultati) deve fermarsi da sola quando arriva in fondo -
   mai "sfondare" e continuare a scorrere quello che sta sotto (il modale, o peggio la pagina).
   Regola generica sugli elementi nativi che possono scrollare dentro qualsiasi modale... */
.modale select,
.modale textarea {
  overscroll-behavior: contain;
}

.modale-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* ricerca globale: la barra resta appena sopra la tastiera (il modale è già un foglio ancorato al
   fondo, vedi .overlay/.modale sopra), i risultati stanno SOPRA la barra e crescono verso l'alto
   man mano che se ne trovano - un max-height più basso del solito 88vh fa sì che a scorrere sia
   solo la lista dei risultati (flex:1 + overflow-y qui sotto), non l'intero modale con dentro
   anche la barra, che altrimenti rischierebbe di finire scrollata fuori vista insieme al resto */
#overlay-ricerca-globale .modale {
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}
#ricerca-globale-risultati {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain; /* ...e questo è il caso "su misura": una lista di risultati con il proprio scroll dentro un modale che scrolla a sua volta */
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.modale-titolo { font-size: 17px; font-weight: 700; }
.chiudi-modale {
  border: none;
  background: var(--surface-2);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  color: var(--text-muted);
}

/* Leaflet mette i propri pannelli interni (marker, popup, controlli) a z-index molto alti
   (fino a 700+). Senza questa regola il contenitore della mappa non isola quei valori in un
   suo livello: finiscono confrontati con tutta la pagina e possono coprire elementi fissi come
   la bottom-nav (z-index 25) quando la mappa scorre vicino al fondo schermo. */
.leaflet-container {
  z-index: 0;
}

#mappa-conferma {
  width: 100%;
  height: 280px;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  border: 1px solid var(--border);
}

.mappa-home-wrap {
  position: relative;
}

#mappa-home {
  width: 100%;
  height: 220px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.btn-schermo-intero {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mappa-home-wrap.schermo-intero {
  position: fixed;
  inset: 0;
  z-index: 40; /* sotto .overlay (50): la scheda cliente deve restare sopra la mappa */
}
.mappa-home-wrap.schermo-intero #mappa-home {
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.mappa-home-wrap.schermo-intero .btn-schermo-intero {
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: 14px;
}
.mappa-home-wrap.schermo-intero .mappa-legenda {
  bottom: calc(42px + env(safe-area-inset-bottom, 0px));
  left: 14px;
}

.mappa-legenda {
  position: absolute;
  left: 8px;
  bottom: 36px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 7px;
  padding: 5px 8px;
  box-shadow: var(--shadow-sm);
  font-size: 9px;
  color: var(--text);
}
.mappa-legenda span { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.mappa-legenda i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

body.blocca-scroll {
  overflow: hidden;
}

/* ---------- fotocamera con rettangolo guida (biglietto da visita) ---------- */

#vista-fotocamera-biglietto {
  position: fixed;
  inset: 0;
  z-index: 60; /* sopra i popup normali (.overlay, 50), sotto la schermata di accesso (200) */
  background: #000;
}
#video-fotocamera-biglietto {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#guida-rettangolo-biglietto {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(82vw, 560px);
  aspect-ratio: 1.586;
  transform: translate(-50%, -50%);
  border: 3px solid #fff;
  border-radius: 14px;
  overflow: hidden; /* la barra di scansione non deve uscire dai bordi arrotondati */
  /* "buco" luminoso: un'ombra enorme dello stesso colore dello sfondo scurisce tutto quello
     che sta FUORI dal rettangolo, senza bisogno di clip-path o div aggiuntivi */
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
/* barra che scorre su e giù dentro il rettangolo SOLO mentre la scansione vera è in corso (classe
   aggiunta/tolta da biglietto-da-visita.js) - feedback che qualcosa sta davvero succedendo */
#barra-scansione-biglietto {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.85);
  opacity: 0;
}
#guida-rettangolo-biglietto.scansione-attiva #barra-scansione-biglietto {
  opacity: 1;
  animation: scansione-su-giu 1.6s ease-in-out infinite;
}
@keyframes scansione-su-giu {
  0% { top: 0; }
  50% { top: calc(100% - 3px); }
  100% { top: 0; }
}
#istruzioni-fotocamera-biglietto {
  position: absolute;
  top: calc(18px + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
#stato-scansione-biglietto {
  position: absolute;
  top: calc(46px + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  min-height: 18px;
}
#btn-scatta-fotocamera-biglietto {
  position: absolute;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: rgba(255, 255, 255, 0.25);
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ---------- carta 3D del cliente - ricostruzione del biglietto da visita, si gira col dito ---------- */

#vista-carta-cliente {
  position: fixed;
  inset: 0;
  z-index: 60; /* stesso strato della fotocamera biglietto: sopra i popup normali (50), sotto l'accesso (200) */
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#suggerimento-carta-cliente {
  position: absolute;
  top: calc(24px + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
#scena-carta-cliente {
  width: min(84vw, 420px);
  aspect-ratio: 1.586; /* proporzioni reali di un biglietto da visita, stessa dell'inquadratura della fotocamera */
  perspective: 1200px;
  -webkit-perspective: 1200px;
  touch-action: pan-y; /* lascia scorrere verticalmente la pagina, il drag orizzontale lo gestiamo noi */
}
#carta-cliente-3d {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  cursor: grab;
  /* niente transition di default: durante il drag l'angolo deve seguire il dito 1:1, senza
     ritardo - la transition si applica SOLO per lo "scatto" finale (vedi clienti.js).
     -webkit-backface-visibility/-webkit-transform-style: senza i prefissi, su alcuni browser
     Android il "retro" resta visibile anche girato - risultato: fronte e retro sembravano
     identici perché si vedevano sovrapposti invece che uno alla volta. */
}
#carta-cliente-3d:active { cursor: grabbing; }
.carta-faccia {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-lg);
  padding: 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 20px 50px -16px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
}
.carta-retro {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, var(--accent), var(--primary)); /* direzione invertita: si distingue anche prima che il testo si legga */
}
.carta-fronte-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.carta-nome { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.carta-riga { font-size: 13px; opacity: 0.92; margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.carta-tag-riga { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.carta-tag-riga .tag { background: rgba(255, 255, 255, 0.22); color: #fff; }
.carta-retro-titolo { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.8; margin-bottom: 10px; }

.avviso-box {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 12px;
}
.avviso-box.info { background: var(--primary-soft); color: var(--primary-dark); }
.avviso-box.errore { background: var(--danger-soft); color: #b91c1c; }
.avviso-box.ok { background: var(--success-soft); color: var(--success); }

.riga-fine-modale {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.riga-fine-modale .btn { flex: 1; }

/* ---------- agenda: calendario mensile ---------- */

.btn-esporta-calendario {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 13px 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  text-align: left;
}
.btn-esporta-calendario-icona {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}
.btn-esporta-calendario-titolo {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
}
.btn-esporta-calendario-sotto {
  display: block;
  font-size: 11.5px;
  opacity: 0.85;
  margin-top: 2px;
}

.agenda-griglia {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.agenda-intestazione {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  padding-bottom: 6px;
}
.agenda-cella {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
}
.agenda-cella.vuota { visibility: hidden; cursor: default; }
.agenda-cella.oggi { background: var(--primary-soft); font-weight: 700; color: var(--primary-dark); }
.agenda-cella.selezionata { outline: 2px solid var(--primary); outline-offset: -2px; }
.agenda-pallini { display: flex; gap: 3px; margin-top: 2px; }
.agenda-pallino { width: 5px; height: 5px; border-radius: 50%; }
.agenda-pallino-giro { background: var(--primary); }
.agenda-pallino-appuntamento { background: var(--warn); }

.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.5);
  border-top-color: #fff;
  border-radius: 50%;
  animation: gira 0.7s linear infinite;
  display: inline-block;
}
@keyframes gira { to { transform: rotate(360deg); } }

.import-riepilogo {
  font-size: 13.5px;
  line-height: 1.6;
}

/* ---------- estratti conto ---------- */

.estratto-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}
.estratto-mese { font-weight: 700; font-size: 14.5px; }
.estratto-azienda { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.estratto-totale { font-weight: 800; color: var(--primary-dark); font-size: 16px; }

.catalogo-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.catalogo-azioni { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-elimina-icona {
  border: none;
  background: var(--danger-soft);
  color: var(--danger);
  width: 30px; height: 30px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 14px;
}

.riga-revisione {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 10px;
}
.riga-revisione-top {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.riga-revisione-top select { flex: 1; }
.riga-revisione-campi { display: flex; gap: 8px; }
.riga-revisione-campi input:first-child { flex: 2; }
.riga-revisione-campi input:last-child { flex: 1; }

.tag-ocr { background: #fff4e0; color: #a86400; }

@media (min-width: 561px) {
  .overlay { align-items: center; }
  .modale { border-radius: 22px; max-width: 480px; }
}