/* ═══════════════════════════════════════════════════════════════════
   OmniNeo UI kit — componenti condivisi (pulsanti, selezioni, caricamento)
   Opt-in: si attivano SOLO aggiungendo la classe sull'elemento.
   ":not(#_)" alza la specificità quanto basta per battere gli stili
   inline delle singole pagine senza ricorrere a !important.
   Codici della vetrina: A1 .omni-btn · A2 .omni-btn-outline ·
   A3 .omni-btn-go · A4 .omni-btn-pro · B1 .omni-switch · B2 .omni-check ·
   B3 .omni-seg · E3 .omni-ecg
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --ok-accent: var(--teal, #2dd4c8);
  --ok-on-accent: #04201e;
  --ok-glow: rgba(45, 212, 200, 0.22);
  --ok-surface: var(--bg-card, #0c1628);
  --ok-border: var(--bd-bright, rgba(45, 212, 200, 0.30));
  --ok-text: var(--text, #f0f4fc);
  --ok-muted: var(--text-muted, #7da4bc);
  --ok-violet: #a78bfa;
}
:root[data-theme="light"] {
  --ok-accent: #0f766e;
  --ok-on-accent: #ffffff;
  --ok-glow: rgba(15, 118, 110, 0.20);
  --ok-surface: #ffffff;
  --ok-border: #94a3b8;
  --ok-text: #0b1220;
  --ok-muted: #3a4757;
  --ok-violet: #6d28d9;
}
/* Superfici sempre scure (riquadro contenuti bloccati, barra versione gratuita):
   forza la palette scura qualunque sia il tema. */
.omni-kit-dark:not(#_), :root[data-theme="light"] .omni-kit-dark:not(#_) {
  --ok-accent: #2dd4c8; --ok-on-accent: #04201e; --ok-glow: rgba(45, 212, 200, 0.22);
  --ok-surface: #0f172a; --ok-border: rgba(45, 212, 200, 0.30);
  --ok-text: #e2e8f0; --ok-muted: #94a3b8; --ok-violet: #a78bfa;
}

/* ── A1 · Pulsante principale (alone luminoso) ─────────────────────── */
.omni-btn:not(#_) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 700; font-size: 15px; line-height: 1.2; letter-spacing: .2px;
  color: var(--ok-on-accent); background: var(--ok-accent);
  border: 0; border-radius: 12px; padding: 13px 22px;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 0 0 0 var(--ok-glow);
  transition: box-shadow .25s, transform .12s, opacity .2s;
}
.omni-btn:not(#_):hover:not(:disabled) { box-shadow: 0 0 0 6px var(--ok-glow), 0 0 28px var(--ok-glow); opacity: 1; }
.omni-btn:not(#_):active:not(:disabled) { transform: scale(.97); }
.omni-btn:not(#_):disabled { opacity: .45; cursor: not-allowed; }
.omni-btn--block.omni-btn--block:not(#_) { display: flex; width: 100%; }
/* Variante compatta (usabile con A1-A4) */
.omni-btn--sm.omni-btn--sm:not(#_) { font-size: 13px; padding: 7px 14px; }

/* ── A2 · Pulsante secondario (contorno, si riempie al passaggio) ──── */
.omni-btn-outline:not(#_) {
  position: relative; z-index: 0; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 700; font-size: 14px; line-height: 1.2; color: var(--ok-accent);
  background: transparent; border: 1.5px solid var(--ok-accent);
  border-radius: 999px; padding: 11px 20px;
  cursor: pointer; text-decoration: none; transition: color .3s;
}
.omni-btn-outline:not(#_)::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ok-accent); transform: translateX(-101%); transition: transform .35s ease;
}
.omni-btn-outline:not(#_):hover:not(:disabled) { color: var(--ok-on-accent); border-color: var(--ok-accent); }
.omni-btn-outline:not(#_):hover:not(:disabled)::before { transform: none; }
.omni-btn-outline:not(#_):disabled { opacity: .45; cursor: not-allowed; }

/* ── A3 · Pulsante di navigazione (tasto fisico con freccia) ───────── */
.omni-btn-go:not(#_) {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; font-weight: 700; font-size: 14px; line-height: 1.2; color: var(--ok-text);
  background: var(--ok-surface); border: 1px solid var(--ok-border);
  border-radius: 12px; padding: 12px 20px; cursor: pointer; text-decoration: none;
  box-shadow: 0 4px 0 var(--ok-border); transition: transform .1s, box-shadow .1s;
}
.omni-btn-go:not(#_) svg { width: 16px; height: 16px; stroke: var(--ok-accent); flex-shrink: 0; }
.omni-btn-go:not(#_):active { transform: translateY(4px); box-shadow: 0 0 0 var(--ok-border); }

/* ── A4 · Pulsante Pro (bordo animato) — SOLO per il passaggio a Pro ── */
@property --ok-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.omni-btn-pro:not(#_) {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 700; font-size: 15px; line-height: 1.2; color: var(--ok-text);
  background: var(--ok-surface); border: 0; border-radius: 12px; padding: 14px 24px;
  cursor: pointer; text-decoration: none;
}
.omni-btn-pro:not(#_)::before {
  content: ""; position: absolute; inset: -2px; border-radius: 14px; z-index: -2;
  background: conic-gradient(from var(--ok-angle), var(--ok-accent), var(--ok-violet), var(--ok-accent));
  animation: ok-spin 4s linear infinite;
}
.omni-btn-pro:not(#_)::after {
  content: ""; position: absolute; inset: 0; border-radius: 12px; z-index: -1; background: var(--ok-surface);
}
@keyframes ok-spin { to { --ok-angle: 360deg; } }

/* ── B1 · Interruttore on/off (su un input checkbox) ───────────────── */
input[type="checkbox"].omni-switch:not(#_) {
  appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0;
  width: 46px; height: 26px; border-radius: 999px; background: var(--ok-border);
  position: relative; cursor: pointer; transition: background .25s;
}
input[type="checkbox"].omni-switch:not(#_)::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .25s;
}
input[type="checkbox"].omni-switch:not(#_):checked { background: var(--ok-accent); }
input[type="checkbox"].omni-switch:not(#_):checked::after { transform: translateX(20px); }
input[type="checkbox"].omni-switch:not(#_):disabled { opacity: .5; cursor: not-allowed; }

/* ── B2 · Casella con spunta ───────────────────────────────────────── */
input[type="checkbox"].omni-check:not(#_) {
  appearance: none; -webkit-appearance: none; margin: 1px 0 0; flex-shrink: 0;
  width: 22px; height: 22px; border: 2px solid var(--ok-border); border-radius: 7px;
  display: grid; place-items: center; cursor: pointer; background: transparent; transition: all .2s;
}
input[type="checkbox"].omni-check:not(#_)::after {
  content: ""; width: 6px; height: 11px; margin-top: -3px;
  border: solid var(--ok-on-accent); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0); transition: transform .2s;
}
input[type="checkbox"].omni-check:not(#_):checked { background: var(--ok-accent); border-color: var(--ok-accent); }
input[type="checkbox"].omni-check:not(#_):checked::after { transform: rotate(45deg) scale(1); }

/* ── B3 · Selettore a segmenti (contenitore di pulsanti, uno .active) ── */
.omni-seg:not(#_) {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px;
  background: var(--ok-surface); border: 1px solid var(--bd, rgba(15,23,42,.1)); border-radius: 12px;
}
.omni-seg:not(#_) > button {
  font-family: inherit; font-weight: 600; font-size: 13px; line-height: 1.2; color: var(--ok-muted);
  background: transparent; border: 0; box-shadow: none; border-radius: 9px; padding: 8px 14px;
  cursor: pointer; transition: background .2s, color .2s;
}
.omni-seg:not(#_) > button:hover { color: var(--ok-text); background: transparent; }
.omni-seg:not(#_) > button.active { background: var(--ok-accent); color: var(--ok-on-accent); }

/* ── E3 · Caricamento a traccia ECG ────────────────────────────────── */
.omni-ecg { width: 120px; height: 44px; display: block; }
.omni-ecg--center { margin: 0 auto; }
.omni-ecg--sm { width: 64px; height: 24px; }
.omni-ecg path {
  fill: none; stroke: var(--ok-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 190; stroke-dashoffset: 190; animation: ok-ecg 1.8s linear infinite;
}
@keyframes ok-ecg { 60% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

.omni-btn:focus-visible, .omni-btn-outline:focus-visible, .omni-btn-go:focus-visible, .omni-btn-pro:focus-visible,
.omni-switch:focus-visible, .omni-check:focus-visible, .omni-seg > button:focus-visible {
  outline: 2px solid var(--ok-accent); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .omni-btn-pro::before, .omni-ecg path { animation: none; }
  .omni-ecg path { stroke-dashoffset: 0; }
  .omni-btn, .omni-btn-outline, .omni-btn-outline::before, .omni-switch, .omni-switch::after, .omni-check, .omni-check::after { transition: none; }
}

/* L'attributo hidden deve vincere sul display impostato dal kit
   (es. «Prossima» dei quiz, nascosto finché non si risponde). */
[hidden][hidden][class*="omni-"]:not(#_) { display: none; }