@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=DM+Serif+Display&display=swap');

/* ============================================================
   SISTEMA DI DESIGN CONDIVISO (fonte unica)
   Colori, raggi, ombre, font e componenti comuni a tutti i moduli.
   Va incluso DOPO lo <style> interno di ogni modulo CHIARO
   (marketing, preventivi, CRM, catalogo, fornitori): i token qui
   sovrascrivono quelli locali e allineano l'intero prodotto.
   Il modulo Design (tema scuro CAD) NON usa questo file.
   ============================================================ */
:root{
  --bg:#f0f2f8;  --bg2:#e8ebf3;  --w:#ffffff;
  --p:#4338ca;   --pl:#5046e5;   --pd:#312e81;
  --acc:#f59e0b; --grn:#059669;  --red:#dc2626; --wa:#25d366;
  --bor:#dde1ed; --tx:#0f172a;   --tx2:#475569; --tx3:#5f6f86;
  --r:16px; --rs:10px;
  /* Scala ombre per dare profondità in modo coerente */
  --sh:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.04);
  --sh-md:0 4px 14px rgba(15,23,42,.07);
  --sh-lg:0 14px 34px rgba(49,46,129,.13);
  --shl:0 14px 34px rgba(49,46,129,.13);
}

/* Logo/intestazione: stesso font serif elegante ovunque */
.hdr-logo, .app-title{ font-family:'DM Serif Display', serif; }
.gx-serif{ font-family:'DM Serif Display', serif !important; }

/* Stato vuoto premium riusabile: <div class="gx-empty"><div class="gx-empty-ico">📭</div><h3>Titolo</h3><p>Frase utile</p></div> */
.gx-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:46px 24px; color:var(--tx2); }
.gx-empty .gx-empty-ico{ width:66px; height:66px; border-radius:18px; background:linear-gradient(135deg,var(--bg2),#ffffff); display:flex; align-items:center; justify-content:center; font-size:31px; box-shadow:var(--sh-md); margin-bottom:14px; }
.gx-empty h3{ font-family:'DM Serif Display', serif; font-weight:400; font-size:20px; color:var(--tx); margin:0 0 6px; }
.gx-empty p{ font-size:13.5px; color:var(--tx2); max-width:360px; line-height:1.55; margin:0 0 14px; }

/* Resa PREMIUM degli stati vuoti già presenti nei moduli (classi .empty / .dash-empty),
   senza dover riscrivere l'HTML: icona in tile arrotondata, titolo serif, testo curato. */
.empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:44px 24px; color:var(--tx2); }
.empty .ico, .empty .empty-icon{ width:66px; height:66px; border-radius:18px; background:linear-gradient(135deg,var(--bg2),#ffffff); display:flex; align-items:center; justify-content:center; font-size:30px; box-shadow:var(--sh-md); margin:0 auto 14px; }
.empty h3{ font-family:'DM Serif Display', serif; font-weight:400; font-size:20px; color:var(--tx); margin:0 0 6px; }
.empty p{ font-size:13.5px; color:var(--tx2); max-width:360px; line-height:1.55; margin:0; }
.dash-empty{ text-align:center; color:var(--tx2); padding:26px 16px; font-size:13.5px; line-height:1.5; }