/* ===========================================
   CONFIGURAZIONE COLORI CENTRALIZZATA
   Colori FISSI per ruolo (nessun tema selezionabile):
     - Azienda         → verde
     - Consulente      → blu
     - Prof. sicurezza → verde acqua
     - Admin           → arancione
     - Commercialista  → indaco
     - Medico          → rosa
     - RSPP esterno    → arancio

   Pulsanti, testate, avatar e badge mantengono il colore dell'area e il testo
   bianco. I token -solid e -azione sono alias della palette originale: tenerli
   allineati corregge anche i componenti condivisi senza override nelle pagine.
   Il token -testo resta distinto per il testo colorato su sfondo chiaro.
   =========================================== */

/* ===== PALETTE PER RUOLO (statiche) ===== */
:root {
  /* Azienda — verde */
  --azienda-primary: #10b981;
  --azienda-primary-rgb: 16, 185, 129;
  --azienda-primary-dark: #059669;
  --azienda-primary-light: #d1fae5;
  --azienda-secondary: #047857;
  --azienda-secondary-light: #34d399;
  --azienda-secondary-dark: #065f46;
  --azienda-gradient-start: #10b981;
  --azienda-gradient-end: #059669;
  --azienda-primary-solid: var(--azienda-primary);
  --azienda-primary-solid-hover: var(--azienda-primary-dark);
  --azienda-primary-solid-testo: #ffffff;
  /* Come testo su bianco serve comunque il gradino scuro: 5.48:1. */
  --azienda-primary-testo: var(--azienda-secondary);
  --azienda-azione: var(--azienda-primary-solid);
  --azienda-azione-testo: var(--azienda-primary-solid-testo);
  --azienda-azione-hover: var(--azienda-primary-solid-hover);

  /* Consulente — blu */
  --consulente-primary: #3b82f6;
  --consulente-primary-rgb: 59, 130, 246;
  --consulente-primary-dark: #2563eb;
  --consulente-primary-light: #dbeafe;
  --consulente-secondary: #1d4ed8;
  --consulente-secondary-light: #60a5fa;
  --consulente-secondary-dark: #1e40af;
  --consulente-gradient-start: #3b82f6;
  --consulente-gradient-end: #2563eb;
  --consulente-primary-solid: var(--consulente-primary);
  --consulente-primary-solid-hover: var(--consulente-primary-dark);
  --consulente-primary-solid-testo: #ffffff;
  --consulente-primary-testo: var(--consulente-primary-dark);
  --consulente-azione: var(--consulente-primary-solid);
  --consulente-azione-testo: var(--consulente-primary-solid-testo);
  --consulente-azione-hover: var(--consulente-primary-solid-hover);

  /* Professionista della sicurezza — verde acqua. Ha colore proprio dove si
     parla di lui (badge, filtri, la sua pagina di scelta azienda, accento della
     sua sessione).

     Qui c'era anche un blocco viola (#7c3aed) identico per struttura, scritto
     sopra a questo: stessa regola :root, quindi vinceva comunque il verde acqua
     e le nove dichiarazioni viola non arrivavano a nessuno. Tolto. Se in giro
     resta scritto "viola" (commenti, TODO, doc), è quel blocco morto. */
  --prof-sicurezza-primary: #0d9488;
  --prof-sicurezza-primary-rgb: 13, 148, 136;
  --prof-sicurezza-primary-dark: #0f766e;
  --prof-sicurezza-primary-light: #ccfbf1;
  --prof-sicurezza-secondary: #115e59;
  --prof-sicurezza-secondary-light: #2dd4bf;
  --prof-sicurezza-secondary-dark: #134e4a;
  --prof-sicurezza-gradient-start: #0d9488;
  --prof-sicurezza-gradient-end: #0f766e;
  --prof-sicurezza-primary-solid: var(--prof-sicurezza-primary);
  --prof-sicurezza-primary-solid-hover: var(--prof-sicurezza-primary-dark);
  --prof-sicurezza-primary-solid-testo: #ffffff;
  --prof-sicurezza-primary-testo: var(--prof-sicurezza-primary-dark);
  --prof-sicurezza-azione: var(--prof-sicurezza-primary-solid);
  --prof-sicurezza-azione-testo: var(--prof-sicurezza-primary-solid-testo);
  --prof-sicurezza-azione-hover: var(--prof-sicurezza-primary-solid-hover);

  /* Admin — arancione */
  --admin-primary: #f59e0b;
  --admin-primary-rgb: 245, 158, 11;
  --admin-primary-dark: #d97706;
  --admin-primary-light: #fef3c7;
  --admin-secondary: #b45309;
  --admin-secondary-light: #fbbf24;
  --admin-secondary-dark: #92400e;
  --admin-gradient-start: #f59e0b;
  --admin-gradient-end: #d97706;
  --admin-primary-solid: var(--admin-primary);
  --admin-primary-solid-hover: var(--admin-primary-dark);
  --admin-primary-solid-testo: #ffffff;
  /* Come testo su bianco l'ambra deve scurire per forza: 5.02:1. */
  --admin-primary-testo: var(--admin-secondary);
  --admin-azione: var(--admin-primary-solid);
  --admin-azione-testo: var(--admin-primary-solid-testo);
  --admin-azione-hover: var(--admin-primary-solid-hover);

  /* Figure esterne (20/10/2026): commercialista, medico competente, RSPP esterno.
     Le loro aree hanno le sezioni ma non ancora le pagine (AreaInArrivoController):
     il colore serve alla shell e alla mascotte di ognuno. */

  /* Commercialista — indaco */
  --commercialista-primary: #6366f1;
  --commercialista-primary-rgb: 99, 102, 241;
  --commercialista-primary-dark: #4f46e5;
  --commercialista-primary-light: #e0e7ff;
  --commercialista-secondary: #4338ca;
  --commercialista-secondary-light: #818cf8;
  --commercialista-secondary-dark: #3730a3;
  --commercialista-gradient-start: #6366f1;
  --commercialista-gradient-end: #4f46e5;
  --commercialista-primary-solid: var(--commercialista-primary);
  --commercialista-primary-solid-hover: var(--commercialista-primary-dark);
  --commercialista-primary-solid-testo: #ffffff;
  --commercialista-primary-testo: var(--commercialista-primary-dark);
  --commercialista-azione: var(--commercialista-primary-solid);
  --commercialista-azione-testo: var(--commercialista-primary-solid-testo);
  --commercialista-azione-hover: var(--commercialista-primary-solid-hover);

  /* Medico competente — rosa */
  --medico-primary: #f43f5e;
  --medico-primary-rgb: 244, 63, 94;
  --medico-primary-dark: #e11d48;
  --medico-primary-light: #ffe4e6;
  --medico-secondary: #be123c;
  --medico-secondary-light: #fb7185;
  --medico-secondary-dark: #9f1239;
  --medico-gradient-start: #f43f5e;
  --medico-gradient-end: #e11d48;
  --medico-primary-solid: var(--medico-primary);
  --medico-primary-solid-hover: var(--medico-primary-dark);
  --medico-primary-solid-testo: #ffffff;
  /* Come testo su bianco serve il gradino scuro: #be123c fa 6.2:1. */
  --medico-primary-testo: var(--medico-secondary);
  --medico-azione: var(--medico-primary-solid);
  --medico-azione-testo: var(--medico-primary-solid-testo);
  --medico-azione-hover: var(--medico-primary-solid-hover);

  /* RSPP esterno — arancio, il colore dei dispositivi di sicurezza */
  --rspp-primary: #ea580c;
  --rspp-primary-rgb: 234, 88, 12;
  --rspp-primary-dark: #c2410c;
  --rspp-primary-light: #ffedd5;
  --rspp-secondary: #9a3412;
  --rspp-secondary-light: #fb923c;
  --rspp-secondary-dark: #7c2d12;
  --rspp-gradient-start: #ea580c;
  --rspp-gradient-end: #c2410c;
  --rspp-primary-solid: var(--rspp-primary);
  --rspp-primary-solid-hover: var(--rspp-primary-dark);
  --rspp-primary-solid-testo: #ffffff;
  /* Come testo su bianco serve il gradino scuro: #c2410c fa 5.2:1. */
  --rspp-primary-testo: var(--rspp-primary-dark);
  --rspp-azione: var(--rspp-primary-solid);
  --rspp-azione-testo: var(--rspp-primary-solid-testo);
  --rspp-azione-hover: var(--rspp-primary-solid-hover);

  /* Pubblico — l'azzurro Konnexa del blog e della landing (`--accent` /
     `--accent-strong` in blog.css). Sono le pagine «Prova gli strumenti»
     (/strumenti), aperte a chi non ha un account: non e' un'area del gestionale,
     quindi niente verde, blu consulente o ambra, ma il colore del marchio. */
  --pubblico-primary: #2f7cf6;
  --pubblico-primary-rgb: 47, 124, 246;
  --pubblico-primary-dark: #1f5fd0;
  --pubblico-primary-light: #dfeafd;
  --pubblico-secondary: #1a4fb0;
  --pubblico-secondary-light: #6ea4f8;
  --pubblico-secondary-dark: #163f8c;
  --pubblico-gradient-start: #2f7cf6;
  --pubblico-gradient-end: #1f5fd0;
  --pubblico-primary-solid: var(--pubblico-primary);
  --pubblico-primary-solid-hover: var(--pubblico-primary-dark);
  --pubblico-primary-solid-testo: #ffffff;
  /* Come testo su bianco serve il gradino scuro: #1f5fd0 fa 5.6:1. */
  --pubblico-primary-testo: var(--pubblico-primary-dark);
  --pubblico-azione: var(--pubblico-primary-solid);
  --pubblico-azione-testo: var(--pubblico-primary-solid-testo);
  --pubblico-azione-hover: var(--pubblico-primary-solid-hover);
}

/* ===== MASTER CONTROL (utente 90) =====
   La console tecnica ha un disegno suo, arancio acceso su quasi nero in stile terminale: non e'
   un'area e non e' l'ambra dell'admin. Vive nella sidebar master e nei badge "MCP-82 // ROOT.90"
   delle pagine master; prima era riscritto in 14 file con 14 nomi diversi. */
:root {
  --master-fuoco: #ff4500;
  --master-ambra: #ff8800;
  --master-notte: #0a0304;
}

/* ===== VARIABILI PRINCIPALI =====
   Default (pagine condivise, es. login): blu.
   Ogni area del gestionale le ridefinisce in base alla classe sul <body>. */
:root {
  --color-primary: var(--consulente-primary);
  --color-primary-rgb: var(--consulente-primary-rgb);
  --color-primary-dark: var(--consulente-primary-dark);
  --color-primary-light: var(--consulente-primary-light);
  --color-secondary: var(--consulente-secondary);
  --color-secondary-light: var(--consulente-secondary-light);
  --color-secondary-dark: var(--consulente-secondary-dark);
  --color-primary-gradient-start: var(--consulente-gradient-start);
  --color-primary-gradient-end: var(--consulente-gradient-end);
  --color-primary-solid: var(--consulente-primary-solid);
  --color-primary-solid-hover: var(--consulente-primary-solid-hover);
  --color-primary-solid-testo: var(--consulente-primary-solid-testo);
  --color-primary-testo: var(--consulente-primary-testo);
  --color-azione: var(--consulente-azione);
  --color-azione-testo: var(--consulente-azione-testo);
  --color-azione-hover: var(--consulente-azione-hover);
}

body.azienda-page {
  --color-primary: var(--azienda-primary);
  --color-primary-rgb: var(--azienda-primary-rgb);
  --color-primary-dark: var(--azienda-primary-dark);
  --color-primary-light: var(--azienda-primary-light);
  --color-secondary: var(--azienda-secondary);
  --color-secondary-light: var(--azienda-secondary-light);
  --color-secondary-dark: var(--azienda-secondary-dark);
  --color-primary-gradient-start: var(--azienda-gradient-start);
  --color-primary-gradient-end: var(--azienda-gradient-end);
  --color-primary-solid: var(--azienda-primary-solid);
  --color-primary-solid-hover: var(--azienda-primary-solid-hover);
  --color-primary-solid-testo: var(--azienda-primary-solid-testo);
  --color-primary-testo: var(--azienda-primary-testo);
  --color-azione: var(--azienda-azione);
  --color-azione-testo: var(--azienda-azione-testo);
  --color-azione-hover: var(--azienda-azione-hover);
}

/* Professionista sicurezza: usa la struttura dell'area azienda (stessa classe
   `azienda-page` sul body, così eredita sidebar, card e top bar senza duplicare
   il CSS) e ne ricolora solo la palette. Deve stare DOPO body.azienda-page:
   stessa specificità, vince l'ultima. */
body.professionista-page {
  --color-primary: var(--prof-sicurezza-primary);
  --color-primary-rgb: var(--prof-sicurezza-primary-rgb);
  --color-primary-dark: var(--prof-sicurezza-primary-dark);
  --color-primary-light: var(--prof-sicurezza-primary-light);
  --color-secondary: var(--prof-sicurezza-secondary);
  --color-secondary-light: var(--prof-sicurezza-secondary-light);
  --color-secondary-dark: var(--prof-sicurezza-secondary-dark);
  --color-primary-gradient-start: var(--prof-sicurezza-gradient-start);
  --color-primary-gradient-end: var(--prof-sicurezza-gradient-end);
  --color-primary-solid: var(--prof-sicurezza-primary-solid);
  --color-primary-solid-hover: var(--prof-sicurezza-primary-solid-hover);
  --color-primary-solid-testo: var(--prof-sicurezza-primary-solid-testo);
  --color-primary-testo: var(--prof-sicurezza-primary-testo);
  --color-azione: var(--prof-sicurezza-azione);
  --color-azione-testo: var(--prof-sicurezza-azione-testo);
  --color-azione-hover: var(--prof-sicurezza-azione-hover);

  /* Diverse regole dell'area azienda (testata della sidebar, voce attiva, ...)
     usano --azienda-* invece di --color-*: ridefinirle qui le fa risolvere in
     verde acqua dentro questa pagina, senza doverle inseguire una per una e
     senza toccare l'area azienda vera. */
  --azienda-primary: var(--prof-sicurezza-primary);
  --azienda-primary-rgb: var(--prof-sicurezza-primary-rgb);
  --azienda-primary-dark: var(--prof-sicurezza-primary-dark);
  --azienda-primary-light: var(--prof-sicurezza-primary-light);
  --azienda-secondary: var(--prof-sicurezza-secondary);
  --azienda-secondary-light: var(--prof-sicurezza-secondary-light);
  --azienda-secondary-dark: var(--prof-sicurezza-secondary-dark);
  --azienda-gradient-start: var(--prof-sicurezza-gradient-start);
  --azienda-gradient-end: var(--prof-sicurezza-gradient-end);
  --azienda-primary-solid: var(--prof-sicurezza-primary-solid);
  --azienda-primary-solid-hover: var(--prof-sicurezza-primary-solid-hover);
  --azienda-primary-solid-testo: var(--prof-sicurezza-primary-solid-testo);
  --azienda-primary-testo: var(--prof-sicurezza-primary-testo);
}

body.consulente-page {
  --color-primary: var(--consulente-primary);
  --color-primary-rgb: var(--consulente-primary-rgb);
  --color-primary-dark: var(--consulente-primary-dark);
  --color-primary-light: var(--consulente-primary-light);
  --color-secondary: var(--consulente-secondary);
  --color-secondary-light: var(--consulente-secondary-light);
  --color-secondary-dark: var(--consulente-secondary-dark);
  --color-primary-gradient-start: var(--consulente-gradient-start);
  --color-primary-gradient-end: var(--consulente-gradient-end);
  --color-primary-solid: var(--consulente-primary-solid);
  --color-primary-solid-hover: var(--consulente-primary-solid-hover);
  --color-primary-solid-testo: var(--consulente-primary-solid-testo);
  --color-primary-testo: var(--consulente-primary-testo);
  --color-azione: var(--consulente-azione);
  --color-azione-testo: var(--consulente-azione-testo);
  --color-azione-hover: var(--consulente-azione-hover);
}

body.admin-page {
  --color-primary: var(--admin-primary);
  --color-primary-rgb: var(--admin-primary-rgb);
  --color-primary-dark: var(--admin-primary-dark);
  --color-primary-light: var(--admin-primary-light);
  --color-secondary: var(--admin-secondary);
  --color-secondary-light: var(--admin-secondary-light);
  --color-secondary-dark: var(--admin-secondary-dark);
  --color-primary-gradient-start: var(--admin-gradient-start);
  --color-primary-gradient-end: var(--admin-gradient-end);
  --color-primary-solid: var(--admin-primary-solid);
  --color-primary-solid-hover: var(--admin-primary-solid-hover);
  --color-primary-solid-testo: var(--admin-primary-solid-testo);
  --color-primary-testo: var(--admin-primary-testo);
  --color-azione: var(--admin-azione);
  --color-azione-testo: var(--admin-azione-testo);
  --color-azione-hover: var(--admin-azione-hover);
}

/* Pagine pubbliche «Prova gli strumenti» (templates/pubblico/base.html.twig):
   stessi componenti condivisi (testata, card, avvisi) nell'azzurro Konnexa. */
body.pubblico-page {
  --color-primary: var(--pubblico-primary);
  --color-primary-rgb: var(--pubblico-primary-rgb);
  --color-primary-dark: var(--pubblico-primary-dark);
  --color-primary-light: var(--pubblico-primary-light);
  --color-secondary: var(--pubblico-secondary);
  --color-secondary-light: var(--pubblico-secondary-light);
  --color-secondary-dark: var(--pubblico-secondary-dark);
  --color-primary-gradient-start: var(--pubblico-gradient-start);
  --color-primary-gradient-end: var(--pubblico-gradient-end);
  --color-primary-solid: var(--pubblico-primary-solid);
  --color-primary-solid-hover: var(--pubblico-primary-solid-hover);
  --color-primary-solid-testo: var(--pubblico-primary-solid-testo);
  --color-primary-testo: var(--pubblico-primary-testo);
  --color-azione: var(--pubblico-azione);
  --color-azione-testo: var(--pubblico-azione-testo);
  --color-azione-hover: var(--pubblico-azione-hover);
}

/* Figure esterne: usano la shell dell'area consulente (classe `consulente-page` sul
   body, così ereditano sidebar e layout) e ne ricolorano la palette, come fa il
   professionista con l'area azienda. Stanno DOPO body.consulente-page: stessa
   specificità, vince l'ultima. Le --consulente-* ridefinite servono alle regole di
   consulente.css che le usano direttamente. */
body.esterno-commercialista {
  --color-primary: var(--commercialista-primary);
  --color-primary-rgb: var(--commercialista-primary-rgb);
  --color-primary-dark: var(--commercialista-primary-dark);
  --color-primary-light: var(--commercialista-primary-light);
  --color-secondary: var(--commercialista-secondary);
  --color-secondary-light: var(--commercialista-secondary-light);
  --color-secondary-dark: var(--commercialista-secondary-dark);
  --color-primary-gradient-start: var(--commercialista-gradient-start);
  --color-primary-gradient-end: var(--commercialista-gradient-end);
  --color-primary-solid: var(--commercialista-primary-solid);
  --color-primary-solid-hover: var(--commercialista-primary-solid-hover);
  --color-primary-solid-testo: var(--commercialista-primary-solid-testo);
  --color-primary-testo: var(--commercialista-primary-testo);
  --color-azione: var(--commercialista-azione);
  --color-azione-testo: var(--commercialista-azione-testo);
  --color-azione-hover: var(--commercialista-azione-hover);

  --consulente-primary: var(--commercialista-primary);
  --consulente-primary-rgb: var(--commercialista-primary-rgb);
  --consulente-primary-dark: var(--commercialista-primary-dark);
  --consulente-primary-light: var(--commercialista-primary-light);
  --consulente-secondary: var(--commercialista-secondary);
  --consulente-secondary-light: var(--commercialista-secondary-light);
  --consulente-secondary-dark: var(--commercialista-secondary-dark);
  --consulente-gradient-start: var(--commercialista-gradient-start);
  --consulente-gradient-end: var(--commercialista-gradient-end);
  --consulente-primary-solid: var(--commercialista-primary-solid);
  --consulente-primary-solid-hover: var(--commercialista-primary-solid-hover);
  --consulente-primary-solid-testo: var(--commercialista-primary-solid-testo);
  --consulente-primary-testo: var(--commercialista-primary-testo);
  --consulente-azione: var(--commercialista-azione);
  --consulente-azione-testo: var(--commercialista-azione-testo);
  --consulente-azione-hover: var(--commercialista-azione-hover);
}

body.esterno-medico {
  --color-primary: var(--medico-primary);
  --color-primary-rgb: var(--medico-primary-rgb);
  --color-primary-dark: var(--medico-primary-dark);
  --color-primary-light: var(--medico-primary-light);
  --color-secondary: var(--medico-secondary);
  --color-secondary-light: var(--medico-secondary-light);
  --color-secondary-dark: var(--medico-secondary-dark);
  --color-primary-gradient-start: var(--medico-gradient-start);
  --color-primary-gradient-end: var(--medico-gradient-end);
  --color-primary-solid: var(--medico-primary-solid);
  --color-primary-solid-hover: var(--medico-primary-solid-hover);
  --color-primary-solid-testo: var(--medico-primary-solid-testo);
  --color-primary-testo: var(--medico-primary-testo);
  --color-azione: var(--medico-azione);
  --color-azione-testo: var(--medico-azione-testo);
  --color-azione-hover: var(--medico-azione-hover);

  --consulente-primary: var(--medico-primary);
  --consulente-primary-rgb: var(--medico-primary-rgb);
  --consulente-primary-dark: var(--medico-primary-dark);
  --consulente-primary-light: var(--medico-primary-light);
  --consulente-secondary: var(--medico-secondary);
  --consulente-secondary-light: var(--medico-secondary-light);
  --consulente-secondary-dark: var(--medico-secondary-dark);
  --consulente-gradient-start: var(--medico-gradient-start);
  --consulente-gradient-end: var(--medico-gradient-end);
  --consulente-primary-solid: var(--medico-primary-solid);
  --consulente-primary-solid-hover: var(--medico-primary-solid-hover);
  --consulente-primary-solid-testo: var(--medico-primary-solid-testo);
  --consulente-primary-testo: var(--medico-primary-testo);
  --consulente-azione: var(--medico-azione);
  --consulente-azione-testo: var(--medico-azione-testo);
  --consulente-azione-hover: var(--medico-azione-hover);
}

body.esterno-rspp {
  --color-primary: var(--rspp-primary);
  --color-primary-rgb: var(--rspp-primary-rgb);
  --color-primary-dark: var(--rspp-primary-dark);
  --color-primary-light: var(--rspp-primary-light);
  --color-secondary: var(--rspp-secondary);
  --color-secondary-light: var(--rspp-secondary-light);
  --color-secondary-dark: var(--rspp-secondary-dark);
  --color-primary-gradient-start: var(--rspp-gradient-start);
  --color-primary-gradient-end: var(--rspp-gradient-end);
  --color-primary-solid: var(--rspp-primary-solid);
  --color-primary-solid-hover: var(--rspp-primary-solid-hover);
  --color-primary-solid-testo: var(--rspp-primary-solid-testo);
  --color-primary-testo: var(--rspp-primary-testo);
  --color-azione: var(--rspp-azione);
  --color-azione-testo: var(--rspp-azione-testo);
  --color-azione-hover: var(--rspp-azione-hover);

  --consulente-primary: var(--rspp-primary);
  --consulente-primary-rgb: var(--rspp-primary-rgb);
  --consulente-primary-dark: var(--rspp-primary-dark);
  --consulente-primary-light: var(--rspp-primary-light);
  --consulente-secondary: var(--rspp-secondary);
  --consulente-secondary-light: var(--rspp-secondary-light);
  --consulente-secondary-dark: var(--rspp-secondary-dark);
  --consulente-gradient-start: var(--rspp-gradient-start);
  --consulente-gradient-end: var(--rspp-gradient-end);
  --consulente-primary-solid: var(--rspp-primary-solid);
  --consulente-primary-solid-hover: var(--rspp-primary-solid-hover);
  --consulente-primary-solid-testo: var(--rspp-primary-solid-testo);
  --consulente-primary-testo: var(--rspp-primary-testo);
  --consulente-azione: var(--rspp-azione);
  --consulente-azione-testo: var(--rspp-azione-testo);
  --consulente-azione-hover: var(--rspp-azione-hover);
}

/* ===== TINTE DELLE AZIENDE (Gestione aziende admin) =====
   Un'azienda di un altro affiliato (non Agatos) e' mattone, una FONARCOM smeraldo; se e'
   entrambe vince l'affiliato (la sceglie `tinta_azienda()`, App\Twig\TintaAziendaExtension).
   La classe rifa' la famiglia del colore primario: messa sul body tinge la scheda intera,
   messa sulla riga tinge quello che la riga disegna col primario (sigla, pulsanti). */
.tinta-affiliato {
  --tinta: #b4442c;
  --tinta-rgb: 180, 68, 44;
  --tinta-dark: #8f3522;
  --tinta-light: #f9e4de;
  --tinta-sfondo: #fcf4f1;
  --tinta-solid: #b4442c;
  --tinta-solid-hover: #8f3522;
  --tinta-testo: #8f3522;
}

/* Smeraldo: come pieno sotto testo bianco serve il 700 (#059669 regge solo 3.8:1). */
.tinta-fonarcom {
  --tinta: #059669;
  --tinta-rgb: 5, 150, 105;
  --tinta-dark: #047857;
  --tinta-light: #d5f5e7;
  --tinta-sfondo: #f1faf6;
  --tinta-solid: #047857;
  --tinta-solid-hover: #065f46;
  --tinta-testo: #065f46;
}

.tinta-affiliato,
.tinta-fonarcom,
body.admin-page.tinta-affiliato,
body.admin-page.tinta-fonarcom {
  --admin-primary: var(--tinta);
  --admin-primary-rgb: var(--tinta-rgb);
  --admin-primary-dark: var(--tinta-dark);
  --admin-primary-light: var(--tinta-light);
  --admin-secondary: var(--tinta-dark);
  /* Coppia sfondo/testo di .admin-btn-warning (Preventivo, Disattiva): chiaro sotto, scuro sopra. */
  --admin-secondary-light: var(--tinta-light);
  --admin-secondary-dark: var(--tinta-testo);
  --admin-gradient-start: var(--tinta);
  --admin-gradient-end: var(--tinta-dark);
  --admin-primary-solid: var(--tinta-solid);
  --admin-primary-solid-hover: var(--tinta-solid-hover);
  --admin-primary-testo: var(--tinta-testo);
  --admin-azione: var(--tinta-solid);
  --admin-azione-hover: var(--tinta-solid-hover);
  --color-primary: var(--tinta);
  --color-primary-rgb: var(--tinta-rgb);
  --color-primary-dark: var(--tinta-dark);
  --color-primary-light: var(--tinta-light);
  --color-secondary: var(--tinta-dark);
  --color-secondary-light: var(--tinta-light);
  --color-secondary-dark: var(--tinta-testo);
  --color-primary-gradient-start: var(--tinta);
  --color-primary-gradient-end: var(--tinta-dark);
  --color-primary-solid: var(--tinta-solid);
  --color-primary-solid-hover: var(--tinta-solid-hover);
  --color-primary-solid-testo: #ffffff;
  --color-primary-testo: var(--tinta-testo);
  --color-azione: var(--tinta-solid);
  --color-azione-testo: #ffffff;
  --color-azione-hover: var(--tinta-solid-hover);
}

body.admin-page.tinta-affiliato .admin-container,
body.admin-page.tinta-fonarcom .admin-container {
  background: var(--tinta-sfondo);
}

/* ===== COLORI COMUNI (NEUTRI E DI STATO) ===== */
:root {
  /* Scala neutra (senza temperatura), non la "gray" di Tailwind che vira al blu: e' la
     stessa famiglia della landing, cosi' il gestionale e la pagina pubblica dicono lo stesso
     grigio. I gradini 100 e 900 prendono i valori che la landing usa davvero (#f0f0f0 e
     #0f0f0f) invece di quelli della scala. Contrasti verificati: nessun gradino attraversa
     la soglia AA, sei migliorano — `node .claude/docs/specs/contrasto-neutri.cjs`.

     Bianchi e grigi chiari */
  --color-white: #ffffff;
  --color-gray-50: #fafafa;
  --color-gray-100: #f0f0f0;
  --color-gray-200: #e5e5e5;
  --color-gray-300: #d4d4d4;

  /* Grigi medi */
  --color-gray-400: #a3a3a3;
  --color-gray-500: #737373;
  --color-gray-600: #525252;
  --color-gray-700: #404040;
  --color-gray-800: #262626;
  --color-gray-900: #0f0f0f;

  /* Nero */
  --color-black: #000000;

  /* Colori di stato comuni.
     Stesso schema dei ruoli: il colore "nudo" è l'identità dello stato (pallini,
     bordi, fondi tenui), il -solid è il gradino scuro.

     Il -solid fa due mestieri con lo stesso valore, ed è il motivo per cui ne
     basta uno: un colore abbastanza scuro da reggere il bianco sopra è anche
     abbastanza scuro da leggersi sul bianco. Quindi -solid sia per il fondo
     pieno sia per il testo colorato.

     Serve perché lo stato è l'informazione che il prodotto deve far emergere per
     prima, e su bianco i colori nudi non si leggono: success 2.54:1,
     warning 2.15:1, danger 3.76:1, info 3.68:1. I -solid stanno fra 4.83:1 e
     5.48:1.

     Di -solid-hover ne restano due, success e danger: sono gli unici stati che
     fanno da fondo a un bottone. Warning e info non ce l'hanno perche' nessuno
     li usa come pieno — l'ambra come bottone tiene il suo colore vivo. */
  --color-success: #10b981;
  --color-success-light: #d1fae5;
  --color-success-dark: #059669;
  --color-success-solid: #047857;
  --color-success-solid-hover: #065f46;
  /* Verde-700 e rosso-600 reggono il bianco (5.48:1 e 4.83:1), a differenza
     dell'ambra. Questi due servono davvero: senza, le regole che li usano
     perdono la dichiarazione `color` e il testo torna a ereditare lo scuro. */
  --color-success-solid-testo: #ffffff;

  --color-danger: #ef4444;
  --color-danger-light: #fee2e2;
  --color-danger-dark: #dc2626;
  --color-danger-solid: #dc2626;
  --color-danger-solid-hover: #b91c1c;
  --color-danger-solid-testo: #ffffff;

  --color-warning: #f59e0b;
  --color-warning-light: #fef3c7;
  --color-warning-dark: #d97706;
  --color-warning-solid: #b45309;

  --color-info: #3b82f6;
  --color-info-light: #dbeafe;
  --color-info-dark: #2563eb;
  --color-info-solid: #2563eb;

  /* Testo sopra la tinta -light, cioe' negli avvisi in pagina. Il -solid li' non regge sempre
     AA (danger 3.95:1, info 4.24:1); il gradino 800 si', fra 6.4 e 7.2:1 per tutti e quattro. */
  --color-success-testo-tinta: #065f46;
  --color-danger-testo-tinta: #991b1b;
  --color-warning-testo-tinta: #92400e;
  --color-info-testo-tinta: #1e40af;
}

/* ===== COLORI UI/INTERFACCIA ===== */
:root {
  /* Sfondi */
  --color-bg-primary: var(--color-white);
  --color-bg-secondary: var(--color-gray-100);
  --color-bg-tertiary: var(--color-gray-200);

  /* Bordi */
  --color-border: var(--color-gray-200);
  --color-border-light: var(--color-gray-200);
  --color-border-medium: var(--color-gray-300);
  --color-border-dark: var(--color-gray-400);

  /* Testi */
  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-text-muted: var(--color-gray-500);
  --color-text-light: var(--color-white);

  /* Overlay e trasparenze */
  --color-overlay-light: rgba(255, 255, 255, 0.8);
  --color-overlay-medium: rgba(255, 255, 255, 0.6);
  --color-overlay-dark: rgba(0, 0, 0, 0.6);

  /* Blur effects */
  --color-glass-light: rgba(255, 255, 255, 0.9);
  --color-glass-medium: rgba(255, 255, 255, 0.8);
  --color-glass-dark: rgba(64, 64, 64, 0.1);
}

/* ===== COLORI SPECIFICI PER COMPONENTI =====
   Dichiarate su body (non :root) perché referenziano --color-primary/secondary,
   che cambiano in base alla classe di ruolo sul body: le variabili composite
   si risolvono sull'elemento dove sono dichiarate. */
body {
  /* Le utility Bootstrap (.bg-primary, bordi e link) leggono il proprio token
     RGB. Senza questo ponte alcune restano blu anche in admin e azienda. */
  --bs-primary-rgb: var(--color-primary-rgb);

  /* Bottoni */
  --color-btn-primary: var(--color-primary);
  --color-btn-primary-hover: var(--color-primary-dark);
  --color-btn-secondary: var(--color-secondary);
  --color-btn-secondary-hover: var(--color-secondary-dark);

  /* Cards */
  --color-card-bg: var(--color-gray-50);
  --color-card-border: var(--color-border-light);
  --color-card-shadow: rgba(0, 0, 0, 0.1);

  /* Modali */
  --color-modal-bg: var(--color-glass-light);
  --color-modal-overlay: var(--color-overlay-dark);

  /* Form inputs */
  --color-input-bg: var(--color-white);
  --color-input-border: var(--color-border-medium);
  --color-input-focus: var(--color-primary);
  --color-input-error: var(--color-danger);
}

/* ===== TIPOLOGIE DI CORSO (calendario e widget dashboard) =====
   Ogni area usa una famiglia cromatica coerente col proprio accento di ruolo:
   admin → caldi (rosso/arancio/giallo), consulente → freddi (blu/ciano/viola),
   azienda → verdi. Le 5 tipologie restano distinguibili DENTRO ogni famiglia,
   ma lo stesso corso cambia colore a seconda di chi lo guarda: per riconoscere
   la tipologia ci sono comunque icona ed etichetta accanto al colore.
   Nessuna tinta coincide con --color-primary dell'area, altrimenti una
   tipologia si confonderebbe con l'accento della pagina.
   Sta qui perché serve al calendario compatto della dashboard (il foglio del
   calendario completo, calendario.css, non esiste più dal 17/09/2026). */

/* Default (pagine senza classe di ruolo, es. login): palette neutra */
body {
  --cal-aula: #3b82f6;      /* blu */
  --cal-video: #10b981;     /* verde */
  --cal-elearning: #d97706; /* ambra */
  --cal-blended: #06b6d4;   /* ciano */
  --cal-webinar: #8b5cf6;   /* viola */
}

/* Admin — famiglia calda */
body.admin-page {
  --cal-aula: #dc2626;      /* rosso */
  --cal-video: #ea580c;     /* arancione */
  --cal-elearning: #ca8a04; /* oro/senape */
  --cal-blended: #9a3412;   /* terracotta */
  --cal-webinar: #be185d;   /* magenta */
}

/* Consulente — famiglia fredda */
body.consulente-page {
  --cal-aula: #2563eb;      /* blu */
  --cal-video: #0891b2;     /* ciano */
  --cal-elearning: #7c3aed; /* viola */
  --cal-blended: #0f766e;   /* verde acqua */
  --cal-webinar: #1e3a8a;   /* blu notte */
}

/* Azienda — famiglia verde */
body.azienda-page {
  --cal-aula: #059669;      /* smeraldo */
  --cal-video: #65a30d;     /* lime */
  --cal-elearning: #0d9488; /* verde acqua */
  --cal-blended: #166534;   /* verde bosco */
  --cal-webinar: #0891b2;   /* ciano */
}

/* ===== GRADIENTI ===== */
body {
  /* Gradiente principale */
  --gradient-primary: linear-gradient(135deg, var(--color-primary-gradient-start), var(--color-primary-gradient-end));

  /* Gradiente neutro */
  --gradient-neutral: linear-gradient(135deg, var(--color-gray-100), var(--color-gray-200));

  /* Gradiente sfondo */
  --gradient-bg: linear-gradient(45deg, var(--color-gray-50), var(--color-gray-100), var(--color-gray-50));
}

/* ===== UTILITÀ ===== */
/* Classe per applicare il gradiente primario */
.gradient-primary {
  background: var(--gradient-primary);
}

/* Testo primario: segue l'area (blu consulente, verde azienda, ambra admin).
   L'!important non è decorativo: Bootstrap dichiara .text-primary con !important
   sul suo --bs-primary, quindi senza di questo vince lui e resta blu ovunque.
   Vale solo per il testo: .bg-primary e .btn-primary restano quelli di Bootstrap.

   Usa il -testo, non il -primary né il -solid: qui il fondo è bianco. Il
   -primary non ci arriva (admin 2.15:1, azienda 2.54:1) e il -solid nemmeno,
   perché sull'ambra e sul verde il -solid È il colore vivo. */
.text-primary {
  color: var(--color-primary-testo) !important;
}

/* Classi per stati — testo su bianco, quindi il gradino -solid. */
.text-success { color: var(--color-success-solid) !important; }
.text-danger { color: var(--color-danger-solid) !important; }
.text-warning { color: var(--color-warning-solid) !important; }
.text-info { color: var(--color-info-solid) !important; }

/* Classi per sfondi */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-success { background-color: var(--color-success); }
.bg-danger { background-color: var(--color-danger); }
.bg-warning { background-color: var(--color-warning); }
.bg-info { background-color: var(--color-info); }

/* ===== OVERRIDE BOTTONI BOOTSTRAP -> COLORE DEL RUOLO =====
   Bootstrap (5.1.3) definisce .btn-primary / .btn-outline-primary con un blu
   fisso. Qui li riportiamo al colore del ruolo (--color-primary), così ogni
   btn-primary nel gestionale segue il colore dell'area senza dover usare
   classi custom nei template. colors.css carica DOPO Bootstrap, quindi a pari
   specificità questi selettori vincono per ordine di sorgente. */
.btn-primary {
  background-color: var(--color-azione);
  border-color: var(--color-azione);
  color: var(--color-azione-testo);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--color-azione-hover);
  border-color: var(--color-azione-hover);
  color: var(--color-azione-testo);
}

.btn-primary:focus,
.btn-primary.focus {
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--color-azione);
  border-color: var(--color-azione);
  color: var(--color-azione-testo);
}

/* Il contorno e il riempimento al passaggio seguono lo stesso colore d'area. */
.btn-outline-primary {
  color: var(--color-azione);
  border-color: var(--color-azione);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary:not(:disabled):not(.disabled):active {
  background-color: var(--color-azione);
  border-color: var(--color-azione);
  color: var(--color-azione-testo);
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
  color: var(--color-azione);
  border-color: var(--color-azione);
}

/* ===== CLASSI SPECIFICHE PER RUOLO ===== */

/* Admin */
.admin-primary { color: var(--admin-primary); }
.admin-bg-primary { background-color: var(--admin-primary); }
.admin-gradient { background: linear-gradient(135deg, var(--admin-gradient-start), var(--admin-gradient-end)); }

/* Consulente */
.consulente-primary { color: var(--consulente-primary); }
.consulente-bg-primary { background-color: var(--consulente-primary); }
.consulente-gradient { background: linear-gradient(135deg, var(--consulente-gradient-start), var(--consulente-gradient-end)); }

/* Aziende */
.azienda-primary { color: var(--azienda-primary); }
.azienda-bg-primary { background-color: var(--azienda-primary); }
.azienda-gradient { background: linear-gradient(135deg, var(--azienda-gradient-start), var(--azienda-gradient-end)); }


/* ===== CARD E CONTENITORI ===== */
.card,
.admin-card,
.consulente-card,
.azienda-card {
  background-color: var(--color-card-bg);
  border-color: var(--color-border-light);
  color: var(--color-text-primary);
}

.card-header {
  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%) !important;
  border-color: var(--color-border-light);
  color: var(--color-text-primary);
}

.card-body,
.admin-card-body,
.consulente-card-body,
.azienda-card-body {
  background-color: var(--color-card-bg);
  color: var(--color-text-primary);
}

/* Hover effects */
.admin-card:hover,
.consulente-card:hover,
.azienda-card:hover {
  background-color: var(--color-bg-secondary) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.1) !important;
}

/* Container backgrounds - ESSENTIAL for card visibility */
.admin-container,
.consulente-container,
.azienda-container {
  background-color: var(--color-bg-tertiary);
  min-height: 100vh;
}

.admin-main,
.consulente-main,
.azienda-main {
  background-color: var(--color-bg-tertiary) !important;
}

/* Page body background */
body {
  background-color: var(--color-bg-tertiary);
}

/* ===== STILI PERSONALIZZATI PAGINAZIONE ===== */
.pagination .page-link {
  color: var(--color-primary) !important;
  background-color: var(--color-card-bg) !important;
  border: 1px solid var(--color-border-light) !important;
  padding: var(--k-space-2) var(--k-space-3);
  text-decoration: none;
  transition: all 0.3s ease;
}

.pagination .page-link:hover {
  color: var(--color-primary-dark) !important;
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-border-medium) !important;
}

.pagination .page-item.active .page-link {
  color: var(--color-primary-solid-testo) !important;
  background-color: var(--color-primary-solid) !important;
  border-color: var(--color-primary-solid) !important;
}

.pagination .page-item.disabled .page-link {
  color: var(--color-text-muted) !important;
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-border-light) !important;
  cursor: not-allowed;
  opacity: 0.6;
}