/* ============================================================
   RIFINITURA GRAFICA — 3° passaggio (17/10)
   Scheda del cliente, notifiche, ricerca globale, caricamenti,
   etichette e scheletri di caricamento. Solo aspetto.
   ============================================================ */

/* ---------- Caricamento: rotella al posto del vassoio vuoto ---------- */
.vuoto.caricamento::before,
.pannello .vuoto.caricamento::before,
.modal .vuoto.caricamento::before {
  display: block;
  width: 22px; height: 22px;
  margin: 0 auto 10px;
  opacity: 1;
  -webkit-mask: none; mask: none;
  background: none;
  border-radius: 50%;
  border: 2px solid var(--n-200);
  border-top-color: var(--brand-600);
  animation: giro-caricamento .75s linear infinite;
}
@keyframes giro-caricamento { to { transform: rotate(360deg); } }
.vuoto.caricamento { color: var(--n-400); font-size: 13px; }

/* scheletri: tinta del tema, luce più morbida */
.skel { background: var(--n-100); border-radius: 10px; }
.skel::after { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--n-0) 70%, transparent), transparent); animation-duration: 1.5s; }

/* ---------- Etichette ---------- */
.badge { border-radius: 999px; padding: 3px 10px; }

/* ---------- Scheda del cliente ---------- */
@media (min-width: 821px) {
  .modal.modal-scheda { border-radius: 22px; }
}
.modal-scheda .modal-head { border-bottom-color: var(--n-100); }
.modal-scheda .scheda-hero {
  background:
    radial-gradient(520px 140px at 0% 0%, color-mix(in srgb, var(--fam, var(--brand-600)) 9%, transparent), transparent 75%),
    var(--n-0);
  border-bottom: 1px solid var(--n-100);
}
.modal-scheda .avatar-hero {
  width: 48px; height: 48px; border-radius: 16px;
  font-family: var(--titoli, inherit); font-size: 16px; font-weight: 800;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--fam, var(--brand-600)) 22%, var(--n-0)),
    color-mix(in srgb, var(--fam, var(--brand-600)) 10%, var(--n-0)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fam, var(--brand-600)) 28%, transparent),
              0 4px 12px -6px color-mix(in srgb, var(--fam, var(--brand-600)) 55%, transparent);
}
.modal-scheda .hero-nome {
  font-family: var(--titoli, inherit);
  font-size: 23px; font-weight: 800; letter-spacing: -.025em;
}
.hero-chip { background: var(--n-0); border-color: var(--n-200); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.hero-tel-gruppo {
  box-shadow: inset 0 0 0 1px var(--brand-100), 0 4px 12px -6px rgba(10, 111, 149, .35);
}
.modal-scheda .hero-tel-gruppo .hero-tel { font-family: var(--titoli, inherit); font-weight: 700; letter-spacing: .01em; }

/* corpo: fondo appena grigio, così i riquadri bianchi stanno in rilievo */
.modal-scheda .scheda-corpo { background: var(--n-50); }
.scheda-ctx .ctx-fase,
.kpi-aff,
.scheda-ctx:not([data-ctx="lead"]) .pannello {
  border-color: var(--n-200);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px -10px rgba(16, 24, 40, .12);
}
.kpi-aff { transition: border-color var(--t-veloce), box-shadow var(--t-veloce), transform var(--t-veloce); }
.kpi-aff[data-kpi-apri]:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 12px 24px -14px rgba(16, 24, 40, .28); }
.fase-prossima { transition: border-color var(--t-veloce), color var(--t-veloce), background var(--t-veloce); }
.fase-prossima:hover:not([disabled]) { background: var(--n-25); }

/* piede: vetro smerigliato sopra il contenuto */
.scheda-piede {
  background: color-mix(in srgb, var(--n-0) 82%, transparent);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-top-color: var(--n-100);
  box-shadow: 0 -10px 24px -16px rgba(16, 24, 40, .25);
}
.scheda-piede .btn { height: 40px; padding: 0 16px; border-radius: 11px; }
.scheda-piede :is(.btn-pericolo-pieno, .btn-perso) {
  border-color: transparent;
  background: linear-gradient(180deg, #e5484d, #c9363b);
  box-shadow: 0 1px 2px rgba(120, 20, 20, .3), 0 4px 12px -4px rgba(201, 54, 59, .45), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.scheda-piede :is(.btn-pericolo-pieno, .btn-perso):hover { background: linear-gradient(180deg, #ec5a5f, #d13d42); border-color: transparent; }

/* ---------- Notifiche ---------- */
.notif-pannello {
  border-color: var(--n-200);
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .03), 0 24px 60px -16px rgba(16, 24, 40, .35);
}
.notif-testa { padding: 14px 16px; background: var(--n-0); border-bottom-color: var(--n-100); }
.notif-testa strong { font-family: var(--titoli, inherit); font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.notif-riga { position: relative; padding: 12px 16px; border-bottom-color: var(--n-100); transition: background var(--t-veloce); }
.notif-riga:hover { background: var(--n-25); }
.notif-riga.nuova { padding-right: 34px; background: color-mix(in srgb, var(--brand-50) 70%, var(--n-0)); }
.notif-riga.nuova:hover { background: var(--brand-50); }
.notif-riga.nuova::after {
  content: ''; position: absolute; right: 14px; top: 16px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-600) 18%, transparent);
}
.notif-ic { border-radius: 10px; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent); }

/* ---------- Ricerca globale (⌘K) ---------- */
.rg-overlay {
  background: rgba(6, 12, 18, .5);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
}
.rg-box {
  border-color: var(--n-200);
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .04), 0 30px 70px -20px rgba(6, 12, 18, .5);
  animation: rg-sale .18s var(--ease);
}
@keyframes rg-sale { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.rg-search { padding: 17px 20px; border-bottom-color: var(--n-100); }
.rg-search svg { color: var(--brand-600); }
.rg-search input { font-size: 17px; }
.rg-search kbd { background: var(--n-50); border-color: var(--n-200); border-bottom-width: 2px; }
.rg-gruppo { color: var(--n-400); letter-spacing: .1em; font-size: 10.5px; }
.rg-item { border-radius: 12px; }
.rg-item:hover, .rg-item:focus-visible { background: color-mix(in srgb, var(--brand-50) 80%, var(--n-0)); outline: none; }
.rg-ic { border-radius: 10px; background: var(--brand-50); color: var(--brand-600); box-shadow: inset 0 0 0 1px var(--brand-100); }

/* ---------- Selezione del testo ---------- */
::selection { background: color-mix(in srgb, var(--brand-600) 22%, transparent); }

/* ---------- Tema scuro ---------- */
[data-theme="dark"] .modal-scheda .scheda-corpo { background: var(--n-50); }
[data-theme="dark"] .notif-riga.nuova { background: var(--brand-50); }
[data-theme="dark"] .rg-ic { background: var(--brand-50); color: var(--brand-700); }
[data-theme="dark"] .scheda-piede { background: color-mix(in srgb, var(--n-0) 85%, transparent); }