/* ============================================================
   CertoFlow — sistema visivo
   Istituzionale autorevole: carta avorio, inchiostro verde-nero,
   verde bosco come unico accento, oro solo per il sigillo.
   Titoli in serif editoriale, corpo in sans di sistema.
   Il tema scuro e' FLAT: grigi neutri, nessun gradiente,
   nessuna superficie tinta (direttiva permanente).
   ============================================================ */

/* ------------------------------------------------------------
   Il carattere del marchio: Source Serif 4 (SIL Open Font License 1.1),
   variabile 400-700, ospitato da noi — nessuna richiesta a terzi, nessun
   tracciamento, e la Content-Security-Policy resta chiusa su 'self'.
   Due sottoinsiemi: latino e latino esteso (accenti italiani, e le lingue
   che aggiungeremo). Licenza in static/fonts/OFL.txt.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;   /* il testo si legge subito, il serif arriva appena pronto */
  src: url('/static/fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/source-serif-4-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* — Superfici (light) — */
  --bg: #f5f3ee;
  --bg-2: #ece9e1;
  --panel: #ffffff;
  --panel-2: #faf9f6;

  /* — Inchiostro — */
  --ink: #16211c;
  --ink-2: #4a5a53;
  --ink-3: #7d8a84;
  --ink-4: #a8b2ad;

  /* — Linee — */
  --line: #e0ddd3;
  --line-2: #eeece5;

  /* — Accento: verde bosco — */
  --accent: #1f5f43;
  --accent-hi: #2a7a56;
  --accent-soft: #e6efe9;
  --accent-ink: #123a29;

  /* — Sigillo: SOLO attestati, timbri, marchi di conformita' —
     ⛔ NIENTE MARRONE, in nessuna tonalita': direttiva dell'utente del 30/07.
     Era un oro scuro, cioe' marrone a tutti gli effetti.
     Ora: carta beige (il beige va bene) + inchiostro quasi nero + un
     verde salvia per il tratto. Il sigillo si distingue per FORMA e
     posizione, non per un colore caldo. */
  --seal: #6f7f6a;
  --seal-soft: #f2efe6;
  --seal-ink: #26302a;

  /* — Semantici: segnalano stato, non decorano — */
  --good: #2f7d51;   --good-soft: #e5f1ea;   --good-ink: #1c5335;
  /* Attenzione: ambra viva per il segno, inchiostro quasi nero per il testo.
     Un arancione scurito per farne testo diventa inevitabilmente marrone,
     quindi il significato lo porta lo SFONDO, non il colore delle lettere. */
  --warn: #e08a00;   --warn-soft: #fbf0da;   --warn-ink: #1f2a24;
  --bad:  #a93030;   --bad-soft:  #f9e8e8;   --bad-ink:  #7a1e1e;
  --info: #2a5d8f;   --info-soft: #e7eef6;   --info-ink: #1b3f63;

  /* — Barra laterale: sempre scura e neutra, in entrambi i temi — */
  --side: #141816;
  --side-2: #1c211e;
  --side-ink: #9aa39e;
  --side-ink-2: #656d69;
  --side-hi: #ffffff;

  /* — Tipografia — */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Source Serif 4", "Iowan Old Style", "Palatino Linotype",
                  "Book Antiqua", Palatino, Charter, Cambria, Georgia,
                  "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* — Forma — */
  --radius: 12px;
  --radius-sm: 9px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(22, 33, 28, .05), 0 8px 24px rgba(22, 33, 28, .06);
  --shadow-lg: 0 2px 4px rgba(22, 33, 28, .06), 0 18px 48px rgba(22, 33, 28, .10);
  --ctl-h: 46px;
}

/* Tema scuro — flat, grigi neutri, accento solo dove si clicca */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1110;
    --bg-2: #141716;
    --panel: #171a19;
    --panel-2: #1c201e;
    --ink: #f1f3f2;
    --ink-2: #b7bdba;
    --ink-3: #8a918d;
    --ink-4: #616865;
    --line: #2a2e2c;
    --line-2: #222624;
    --accent: #4e9b74;
    --accent-hi: #62b088;
    --accent-soft: #1b201e;
    --accent-ink: #a8d8bf;
    --seal: #93a58c;
    --seal-soft: #1b1f1c;
    --seal-ink: #cfd8cc;
    --good: #4e9b74; --good-soft: #1a1f1c; --good-ink: #a8d8bf;
    --warn: #f0a72e; --warn-soft: #1e2018; --warn-ink: #f2d9a6;
    --bad:  #d06a6a; --bad-soft:  #201a1a; --bad-ink:  #eeaeae;
    --info: #6a9ecc; --info-soft: #191d20; --info-ink: #aecbe8;
    --side: #0b0d0c;
    --side-2: #141716;
    --shadow: 0 1px 2px rgba(0, 0, 0, .40), 0 8px 24px rgba(0, 0, 0, .30);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .45), 0 18px 48px rgba(0, 0, 0, .40);
  }
}

:root[data-theme="dark"] {
  --bg: #0f1110; --bg-2: #141716; --panel: #171a19; --panel-2: #1c201e;
  --ink: #f1f3f2; --ink-2: #b7bdba; --ink-3: #8a918d; --ink-4: #616865;
  --line: #2a2e2c; --line-2: #222624;
  --accent: #4e9b74; --accent-hi: #62b088; --accent-soft: #1b201e; --accent-ink: #a8d8bf;
  --seal: #93a58c; --seal-soft: #1b1f1c; --seal-ink: #cfd8cc;
  --good: #4e9b74; --good-soft: #1a1f1c; --good-ink: #a8d8bf;
  --warn: #f0a72e; --warn-soft: #1e2018; --warn-ink: #f2d9a6;
  --bad:  #d06a6a; --bad-soft:  #201a1a; --bad-ink:  #eeaeae;
  --info: #6a9ecc; --info-soft: #191d20; --info-ink: #aecbe8;
  --side: #0b0d0c; --side-2: #141716;
  --shadow: 0 1px 2px rgba(0, 0, 0, .40), 0 8px 24px rgba(0, 0, 0, .30);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .45), 0 18px 48px rgba(0, 0, 0, .40);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.15;
  margin: 0 0 .4em;
  color: var(--ink);
}

h1 { font-size: 44px; }
h2 { font-size: 30px; }
h3 { font-size: 21px; }

p { margin: 0 0 1em; color: var(--ink-2); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; }

/* ---------- Marchio ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.brand:hover { text-decoration: none; }

.brand-mark { width: 30px; height: 30px; color: var(--accent); flex: none; }

.brand-name {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.015em;
}
/* "Certo" in inchiostro, "Flow" in accento: la firma del marchio */
.brand-name b { font-weight: 600; color: var(--accent); }

.eyebrow {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-3);
}

/* ---------- Contenitori ---------- */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card-body { padding: 22px; }

.card-header {
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-2);
  font-size: 16px;
  font-weight: 700;
}

/* ---------- Bottoni ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 22px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font: 700 15px/1 var(--font);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s, transform .15s;
}
.btn:hover { border-color: var(--ink-4); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }

/* ⚠️ Il pulsante che DISTRUGGE. Esiste perché un'azione che non si torna
   indietro non deve avere lo stesso aspetto di una che si annulla: fino al
   06/08/2026 «Sospendi l'azienda» e «Salva» erano identici. Si usa solo
   dove il danno è reale, mai per enfasi — se diventa comune smette di
   voler dire qualcosa. */
.btn-bad {
  background: var(--bad);
  border-color: var(--bad);
  color: #fff;
}
.btn-bad:hover { background: var(--bad-ink); border-color: var(--bad-ink); }
.btn-bad:focus-visible { outline: 3px solid var(--bad-soft); outline-offset: 2px; }

.btn-lg { min-height: 54px; padding: 14px 30px; font-size: 16px; }

/* ---------- Solo per chi legge con uno screen reader ---------- */
/* ⚠️ Sta qui, in brand.css, perché brand.css lo carica ogni pagina. Prima
   stava in grafici.css: funzionava nei corsi e in nessun altro posto. */
.sr-solo {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Badge di stato ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.b-ok   { background: var(--good-soft); color: var(--good-ink); }
.b-warn { background: var(--warn-soft); color: var(--warn-ink); }
.b-bad  { background: var(--bad-soft);  color: var(--bad-ink); }
.b-info { background: var(--info-soft); color: var(--info-ink); }
.b-seal { background: var(--seal-soft); color: var(--seal-ink); }
/* Lo stato che non è uno stato: «non configurato», «mai collegato», «nessuno».
   Senza questa variante si finisce per usare `b-info` — cioè azzurro, cioè
   «guarda qui» — per dire «non c'è niente da guardare». */
.b-neutro { background: var(--bg-2); color: var(--ink-3); }

/* ---------- Regola editoriale: filetto sotto i titoli di sezione ---------- */
.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0 0 28px;
}

/* ---------- Codice di verifica / sigillo ---------- */
.code {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .10em;
  color: var(--ink);
}

/* ---------- Avviso sui cookie ----------
   Sta in brand.css e non in pagine.css perché compare su OGNI pagina,
   comprese quelle che non caricano gli altri fogli. Barra in basso,
   larga quanto la finestra: non copre il contenuto, non va inseguita
   con il mouse, e i due pulsanti hanno lo stesso peso visivo — se un
   giorno servirà il consenso, «Rifiuta» non dovrà essere più difficile
   di «Accetta». */
.avviso-cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
  padding: 16px 22px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .10);
}
.avviso-cookie[hidden] { display: none; }

.avviso-cookie-testo { max-width: 62ch; }
.avviso-cookie-testo p { margin: 0; color: var(--ink-2); }
.avviso-cookie-titolo {
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 2px !important;
}
.avviso-cookie-azioni {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .avviso-cookie { justify-content: flex-start; padding: 14px 16px; }
  .avviso-cookie-azioni { width: 100%; }
  .avviso-cookie-azioni .btn { flex: 1; }
}

/* ---------- Le aree del prodotto, in testata ---------- */
/* ⚠️ Compaiono solo a chi ne ha più di una: un datore di lavoro vede «La
   mia formazione» e «Gestione», chi vende vede anche «Piattaforma». Chi
   ne ha una sola continua a vedere il pulsante di prima — una
   navigazione per una voce sola è rumore.

   Stesso disegno della navigazione dentro le aree (`.pan-nav` in
   gestione.css): pastiglia piena per il posto in cui sei. È la stessa
   domanda — «dove sono?» — e merita la stessa risposta. */
.site-aree {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-inline-end: auto;
}

.site-area {
  padding: 7px 13px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
  text-decoration: none;
  white-space: nowrap;
}
.site-area:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; }
.site-area:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.site-area-qui { background: var(--ink); color: var(--panel); }
.site-area-qui:hover { background: var(--ink); color: var(--panel); }

@media (max-width: 720px) {
  /* Sul telefono le aree vanno a capo per conto loro e prendono tutta la
     riga: così i pulsanti sotto restano allineati, invece di spezzarsi in
     tre righe come faceva la testata prima di essere sistemata. */
  .site-aree { order: 3; width: 100%; margin: 4px 0 0; }
  .site-area { padding: 6px 11px; }
}