/* === SISTEMA VISIVO 2026 · pastiglie di stato (CONDIVISO) ===
   Gemello di /mg_pagina.css. Trasforma .pill/.badge/.sev/... (che NON sono
   button/a) nell'etichetta «quadratino + parola». Lo agganciano solo le
   pagine senza pastiglie piene a testo chiaro (vedi _pastiglie_a_testo_chiaro
   in strumenti/riscrivi_cyber.py). Va DOPO /mg_pagina.css e PRIMA di mgds.css. */
/* ------------------------------------------------------- pastiglie
   La pastiglia piena colorata e' l'altra meta' della firma generata: a
   dieci per schermata non si distinguono piu' fra loro. Pallino quadrato e
   parola. Il markup non cambia, cambia cosa significa la classe. */
/* UNA PASTIGLIA NON E' UN PULSANTE, e questo `:not(button):not(a)` costa tre
   errori identici per essere stato scritto.

   Su Employee 360 i comandi «Modifica», «+ Assegna», «Fascicolo» e «Archivia
   su Nextcloud» sono <button class="pill"> con uno stile in riga che impone
   fondo indaco e testo bianco. Il trattamento delle pastiglie toglieva il
   padding — e quello in riga non lo rimetteva — e aggiungeva il pallino, che
   con currentColor bianco diventava un quadratino bianco davanti al testo.
   Risultato: quattro lastre scure senza respiro con un puntino dentro.

   La regola giusta non e' un'eccezione per quella pagina: se una cosa si puo'
   premere e' un comando, e i comandi non si trasformano in etichette. */
html:root .pill:not(button):not(a),html:root .badge:not(button):not(a),
html:root .status-pill:not(button):not(a),html:root .sev:not(button):not(a),
html:root .st:not(button):not(a),html:root .tag:not(button):not(a),
html:root .ds-badge:not(button):not(a){
  display:inline-flex;align-items:center;gap:7px;background:none;border:0;
  padding:0;border-radius:0;font-size:12.5px;font-weight:500;
  text-transform:none;letter-spacing:0;color:var(--ink-2);
}
html:root .pill:not(button):not(a)::before,html:root .badge:not(button):not(a)::before,
html:root .status-pill:not(button):not(a)::before,html:root .sev:not(button):not(a)::before,
html:root .st:not(button):not(a)::before,html:root .tag:not(button):not(a)::before,
html:root .ds-badge:not(button):not(a)::before{
  content:"";width:8px;height:8px;border-radius:2px;background:currentColor;flex:none}

/* Una pastiglia che si puo' premere e' un comando piccolo, e come tale si
   veste: bordo, respiro, raggio dei comandi. */
html:root button.pill,html:root a.pill,html:root button.badge,html:root a.badge,
html:root button.tag,html:root a.tag{
  display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12.5px;
  font-weight:500;padding:6px 11px;border-radius:var(--rc);cursor:pointer;
  border:1px solid var(--bordo-2);background:var(--superficie);color:var(--ink);
  text-decoration:none;line-height:1;
}
html:root button.pill:hover,html:root a.pill:hover,
html:root button.badge:hover,html:root a.badge:hover{background:var(--campo)}
html:root .ok,html:root .pill.ok,html:root .badge.ok,html:root .sev.bassa{color:var(--verde)}
html:root .warn,html:root .pill.warn,html:root .badge.warn,html:root .sev.media{color:var(--attesa)}
html:root .crit,html:root .err,html:root .pill.crit,html:root .badge.err,
html:root .sev.critica,html:root .sev.alta,html:root .sev.sev1{color:var(--grave)}
html:root .na,html:root .pill.na{color:var(--calmo)}
/* Il pallino tondo diventa quadrato: era l'unico punto in cui alcune pagine
   parlavano una lingua loro. */
html:root .dot{width:8px;height:8px;border-radius:2px}

/* === fine SISTEMA VISIVO 2026 · foglio della pagina === */