/* dashboard/css/10-base.css — estratto da app.css (2026-07, split senza build). */
/* S4 (2026-05-19) brand allineato a Miele Red ufficiale Brand Manual 2024 pag 27.
   Hover schiarisce ~15% lightness (medio, Andrea 2026-05-19). */
:root {
  --brand: #8C0014;
  --brand-hover: #C00C20; /* hover medio (schiarisce ~15%, era #DA0124 troppo lighter) */
  --brand-dark: #8C0014; /* alias legacy, eventualmente deprecato */
  --brand-soft: #FCEEF1;
  --bg: #F5F6F8;
  --surface: #FFFFFF;
  --ink: #0F1419;
  --ink-2: #4A5568;
  --ink-3: #8A93A4;
  --ink-placeholder: #9AA3B2; /* SOLO ::placeholder: hint piu' tenue del testo. Stesso valore in shared/tokens.css (app): tono unico fra le aree. */
  --line: #E4E7EC;
  --ok: #16A34A;
  --warn: #D97706;
  --danger: #DC2626;
  --info: #2563EB;
  --growth: #7C3AED; /* obiettivo "Aumenta i clienti" (referral): viola, distinto dai 5 dot esistenti */
  --radius: 16px;
  --shadow-card: 0 1px 2px rgba(15,20,25,0.04), 0 6px 18px rgba(15,20,25,0.05);
  /* Padding-x orizzontale uniforme per tutti i container-content di pagina (mobile + desktop).
     Tutti i selettori layout (ios-header, section-title, mkt-*, cust-card, clienti-toolbar, filter-row, timeline, wiz-*, ecc.) usano questa variabile per allinearsi a flush-left con h1. Non sovrascrivere in media query. */
  --page-pad-x: 18px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* text-size-adjust 100%: disattiva il text autosizing di Safari iOS (gonfia
   il testo di alcuni blocchi solo su iPhone, allargando il layout oltre il
   viewport -> shrink-to-fit + auto-zoom al focus degli input). Reset standard
   (normalize.css) che mancava. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { font-family: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Display", "Segoe UI", Roboto, system-ui, sans-serif; font-size: 16px; line-height: 1.45; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
/* Rete di sicurezza globale: stringhe lunghe senza spazi (email, URL, ID) vanno a
   capo invece di sforare/tagliare i contenitori. Innocuo sul testo normale e sugli
   elementi con white-space:nowrap (badge/pill). Complemento di min-width:0 sui flex. */
body { overflow-wrap: break-word; }
button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }
/* Placeholder globale: tono unico e tenue, distinto dal valore inserito (--ink).
   opacity:1 pareggia Firefox, che di default attenua il colore dei placeholder. */
::placeholder { color: var(--ink-placeholder); opacity: 1; }
.i { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: middle; }
.i-sm { width: 14px; height: 14px; }
.i-lg { width: 22px; height: 22px; }
.i-xl { width: 28px; height: 28px; }
.i-2xl { width: 36px; height: 36px; }

/* Legend */
.legend { width: 100%; max-width: 1340px; margin: 0 auto; padding: 26px 28px 8px; text-align: center; color: var(--ink-2); }
.legend h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px; color: var(--ink); }
.legend p { font-size: 14px; max-width: 760px; margin: 0 auto; }
.legend .pill-info { display: inline-block; background: var(--brand-soft); color: var(--brand); padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; margin: 0 4px; }