/* =====================================================================
   Filippi Design Kit · COMPONENTI — i NOMI
   Lessico editoriale italiano e degli strumenti di misura.
   Richiede tokens.css e animazioni.css.
   Variabili per istanza:
     --acc  accento della scheda (hex)    --acc-txt  testo dell'occhiello (oro → oro brunito)
     --c    colore vivo (tripletta RGB)   --c-hex    colore pieno (quadranti, passi, tacche)
     --pct / --v  livello in %            --fd-giro  durata di un giro (ritmo())
   Stati trasversali: .is-acceso · .is-muto (segnale assente: tratteggio) · .is-avviso
   ===================================================================== */

.fd, .fd * { box-sizing: border-box }
.fd { font-family: var(--fd-font-testo); color: var(--fd-inchiostro); -webkit-font-smoothing: antialiased }

/* ---------- MARCHIO: «filippi» + la spia oro che respira ---------- */
.fd-marchio { display: inline-flex; align-items: baseline; gap: .08em; font-family: var(--fd-font-titoli); font-weight: var(--fd-fw-black); font-size: var(--fd-marchio, 28px); letter-spacing: -.02em; color: var(--fd-inchiostro); line-height: 1 }
.fd-marchio i { --c: var(--fd-oro-rgb); display: inline-block; width: .3em; height: .3em; border-radius: 50%; background: var(--fd-oro); animation: fd-batte 2.4s ease-in-out infinite }

/* ---------- SCHEDA con NASTRO d'accento ---------- */
.fd-scheda {
  --acc: var(--fd-spento);
  position: relative; overflow: hidden;
  background: var(--fd-foglio); border: 1px solid var(--fd-filo);
  border-radius: var(--fd-r-scheda); box-shadow: var(--fd-ombra-scheda);
  animation: fd-arriva var(--fd-t-scheda) var(--fd-ease-out);
}
.fd-scheda::before { content: ''; position: absolute; inset: 0 0 auto; height: var(--fd-nastro); background: var(--acc); z-index: 3 }
.fd-scheda.is-acceso { box-shadow: var(--fd-bagliore-scheda) }
.fd-scheda--oro { --acc: var(--fd-oro); --acc-txt: var(--fd-oro-brunito) }
.fd-corpo { padding: 0 var(--fd-s6) var(--fd-s6); display: flex; flex-direction: column; gap: var(--fd-s3) }

/* INTESTAZIONE: occhiello · titolo · sommario, con velatura dell'accento */
.fd-intestazione {
  padding: var(--fd-s8) var(--fd-s7) var(--fd-s5); text-align: left;
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 9%, transparent), transparent);
}
.fd-occhiello { font-size: var(--fd-fs-occhiello); font-weight: var(--fd-fw-bold); color: var(--acc-txt, var(--acc, var(--fd-grafite))); letter-spacing: var(--fd-ls-occhiello); text-transform: uppercase; margin-bottom: 2px }
.fd-occhiello--neutro { color: var(--fd-grafite) }
.fd-titolo { font-family: var(--fd-font-titoli); font-size: var(--fd-fs-titolo); font-weight: var(--fd-fw-black); color: var(--fd-inchiostro); line-height: 1.15; text-wrap: balance }
.fd-titolo--apertura { font-size: var(--fd-fs-apertura); line-height: 1.1 }
.fd-sommario { font-size: var(--fd-fs-sommario); color: var(--fd-matita); margin-top: 4px; line-height: 1.35 }
.fd-sommario b { color: var(--fd-inchiostro) }

/* RIGA di misure separate da un punto */
.fd-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 7px; font-size: var(--fd-fs-sommario); color: var(--fd-matita) }
.fd-riga .fd-punto { width: 3px; height: 3px; border-radius: 50%; background: var(--fd-punto) }
.fd-misura { font-size: var(--fd-fs-cifra); font-weight: var(--fd-fw-bold) }  /* colore da coloreIntensita() */

/* ---------- GRIGLIE e DATO (etichetta · valore · nota) ---------- */
.fd-griglia-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fd-s3) }
.fd-griglia-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fd-s3) }
.fd-griglia-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px }
.fd-dato { background: var(--fd-carta); border-radius: var(--fd-r-dato); padding: 11px var(--fd-s5); min-width: 0; animation: fd-sale var(--fd-t-ingresso) var(--fd-ease-out) both }
.fd-dato .k { font-size: var(--fd-fs-occhiello); font-weight: var(--fd-fw-bold); color: var(--fd-grafite); letter-spacing: .8px; text-transform: uppercase }
.fd-dato .v { font-family: var(--fd-font-dati); font-size: var(--fd-fs-valore); font-weight: var(--fd-fw-black); color: var(--fd-inchiostro); line-height: 1.1; margin-top: 3px; white-space: nowrap; font-variant-numeric: tabular-nums }
.fd-dato .v small { font-size: 12px; font-weight: var(--fd-fw-medium); color: var(--fd-matita); margin-left: 2px }
.fd-dato .d { font-size: 11.5px; color: var(--fd-matita); margin-top: 2px; line-height: 1.3 }

/* ---------- TESSERA: pezzo di un mosaico di stati ---------- */
.fd-tessera { --c: var(--fd-spento-rgb); position: relative; overflow: hidden; min-width: 0; background: var(--fd-carta); border-radius: var(--fd-r-tessera); padding: 9px 8px 8px; border: 1.5px solid transparent; animation: fd-spunta var(--fd-t-ingresso) var(--fd-ease-out) both }
.fd-tessera.is-acceso { background: radial-gradient(circle at 80% 15%, rgba(var(--c),.55), rgba(var(--c),.14) 60%, var(--fd-carta)); box-shadow: 0 6px 14px -8px rgba(var(--c),.9) }
.fd-tessera.is-acceso::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 15%, rgba(var(--c),.35), transparent 55%); animation: fd-luccica 3s ease-in-out infinite }
.fd-tessera .n { position: relative; font-size: var(--fd-fs-occhiello); font-weight: var(--fd-fw-bold); color: var(--fd-matita); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.fd-tessera .v { position: relative; font-size: var(--fd-fs-cifra); font-weight: var(--fd-fw-medium); margin-top: 3px; line-height: 1; font-variant-numeric: tabular-nums }
.fd-tessera .fd-spia { position: absolute; top: 7px; right: 7px; z-index: 1 }

/* ---------- SPIA ---------- */
.fd-spia, .fd-spia { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--c, var(--fd-oro-rgb))); animation: fd-batte 2s ease-in-out infinite }

/* ---------- STATO (etichetta a pillola) ---------- */
.fd-stato { --c: var(--fd-oro-rgb); display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: var(--fd-fw-bold); color: var(--fd-inchiostro); background: rgba(var(--c),.2); border-radius: var(--fd-r-stato); padding: 3px 9px; white-space: nowrap }
.fd-stato--allerta { color: var(--fd-allerta); animation: fd-allerta 1.6s ease-in-out infinite }
.fd-stato--critico { color: var(--fd-allerta); background: rgba(var(--fd-allerta-rgb),.12) }
.fd-quieto { font-size: 12px; color: var(--fd-grafite) }

/* ---------- INTERRUTTORE: acceso/spento + livello ---------- */
.fd-interruttore {
  --c: var(--fd-oro-rgb); --pct: 0%;
  position: relative; overflow: hidden; display: grid; grid-template: "i n" 1fr "i l" 1fr / 36px 1fr; column-gap: var(--fd-s4);
  min-height: 60px; padding: var(--fd-s4) var(--fd-s5); border-radius: var(--fd-r-dato); border: none; text-align: left; cursor: pointer;
  background: var(--fd-carta); font: inherit; color: inherit;
  transition: transform var(--fd-t-pressione) ease, box-shadow .5s ease;
  animation: fd-affiora .55s var(--fd-ease-out) both;
}
.fd-interruttore:active { transform: scale(.95) }
.fd-interruttore:focus-visible { outline: 2px solid rgb(var(--c)); outline-offset: 2px }
.fd-interruttore .ic { grid-area: i; align-self: center; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--fd-pozzetto); color: var(--fd-spento-icona); transition: background var(--fd-t-colore) }
.fd-interruttore .ic svg { width: 20px; height: 20px; fill: currentColor }
.fd-interruttore .n { grid-area: n; align-self: end; font-size: var(--fd-fs-nome); font-weight: var(--fd-fw-bold); color: var(--fd-inchiostro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.fd-interruttore .l { grid-area: l; align-self: start; font-size: var(--fd-fs-etichetta); margin-top: 1px; color: var(--fd-spento) }
.fd-interruttore::after { content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: var(--pct); background: rgb(var(--c)); border-radius: 0 4px 4px 0; transition: width .8s var(--fd-ease-out) }
.fd-interruttore.is-acceso { background: linear-gradient(150deg, rgba(var(--c),.32), rgba(var(--c),.10)); box-shadow: var(--fd-bagliore) }
.fd-interruttore.is-acceso .ic { background: rgb(var(--c)); color: #fff; animation: fd-pulsa 2.6s ease-in-out infinite }
.fd-interruttore.is-acceso .l { color: var(--fd-inchiostro) }
.fd-interruttore--rotante.is-acceso .ic { animation: none }
.fd-interruttore--rotante.is-acceso .ic svg { animation: fd-gira var(--fd-giro, 1s) linear infinite }

/* ---------- COMANDO con gradiente ---------- */
.fd-comando { display: flex; flex-direction: column; align-items: center; gap: var(--fd-s3); padding: 12px 4px 10px; border: none; border-radius: var(--fd-r-comando); background: var(--fd-carta); font: inherit; cursor: pointer; transition: transform var(--fd-t-pressione) ease }
.fd-comando:active { transform: scale(.93) }
.fd-comando .ic { width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; background: var(--g, var(--fd-grad-fuoco)); box-shadow: 0 8px 16px -8px var(--g1, var(--fd-allerta)) }
.fd-comando .ic svg { width: 22px; height: 22px; fill: #fff }
.fd-comando:hover .ic { animation: fd-saltella .6s ease }
.fd-comando .n { font-size: 12px; font-weight: var(--fd-fw-bold); color: var(--fd-inchiostro) }

/* ---------- INDICATORI con icona in pozzetto ---------- */
.fd-indicatori { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fd-s3) }
.fd-indicatori .k { display: flex; align-items: center; gap: var(--fd-s3); min-width: 0 }
.fd-indicatori .ic { flex: none; width: 34px; height: 34px; border-radius: var(--fd-r-icona); display: grid; place-items: center; background: rgba(var(--c),.18) }
.fd-indicatori svg { width: 20px; height: 20px; transform-origin: 50% 90% }
.fd-indicatori b { display: block; font-size: var(--fd-fs-cifra); font-weight: var(--fd-fw-black); color: var(--fd-inchiostro); line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums }
.fd-indicatori b i { font-style: normal; font-size: 11px; font-weight: var(--fd-fw-medium); color: var(--fd-matita) }
.fd-indicatori small { font-size: var(--fd-fs-occhiello); color: var(--fd-matita) }

/* ---------- LETTURA: il dato spiegato a parole ---------- */
.fd-letture { display: flex; flex-direction: column; gap: 6px }
.fd-lettura { display: flex; gap: var(--fd-s4); align-items: flex-start; font-size: var(--fd-fs-sommario); color: var(--fd-matita); line-height: 1.4; animation: fd-sale var(--fd-t-ingresso) var(--fd-ease-out) both }
.fd-lettura > span { flex: none; width: 26px; height: 26px; border-radius: 9px; background: var(--fd-carta); display: grid; place-items: center; font-size: 14px }
.fd-lettura b { color: var(--fd-inchiostro) }

/* ---------- REGOLO: scala a soglie con cursore ---------- */
.fd-regolo { position: relative; height: 10px; border-radius: 5px; background: var(--fd-solco) }
.fd-regolo > i { position: absolute; top: 0; bottom: 0; opacity: .28 }
.fd-regolo > u { position: absolute; left: 0; top: 2px; bottom: 2px; width: var(--v, 0%); border-radius: 4px; background: var(--fill, var(--fd-regolare)); animation: fd-riempie var(--fd-t-riempimento) var(--fd-ease-out) both }
.fd-regolo > s { position: absolute; top: -5px; left: var(--v, 0%); width: 4px; height: 20px; margin-left: -2px; border-radius: 2px; background: var(--fd-inchiostro); animation: fd-scorre var(--fd-t-riempimento) var(--fd-ease-out) both }
.fd-regolo.is-avviso > s { animation: fd-scorre var(--fd-t-riempimento) var(--fd-ease-out) both, fd-avverte 1.6s ease-in-out var(--fd-t-riempimento) infinite }

/* ---------- QUADRANTE percentuale — SVG con pathLength=100 ---------- */
.fd-quadrante { position: relative; background: var(--fd-carta); border-radius: var(--fd-r-dato); padding: var(--fd-s4) 6px; text-align: center; min-width: 0 }
.fd-quadrante svg { width: 64px; height: 64px; transform: rotate(-90deg); display: block; margin: 0 auto }
.fd-quadrante circle { fill: none; stroke-width: 3.4 }
.fd-quadrante .fondo { stroke: var(--fd-solco) }
.fd-quadrante .arco { stroke: var(--c-hex, var(--fd-flusso)); stroke-linecap: round; animation: fd-avvolge var(--fd-t-riempimento) var(--fd-ease-out) both }
.fd-quadrante .p { position: absolute; top: 31px; left: 0; right: 0; font-size: 16px; font-weight: var(--fd-fw-black); color: var(--fd-inchiostro) }
.fd-quadrante .p small { font-size: 10px; color: var(--fd-matita) }
.fd-quadrante .k { font-size: 12px; font-weight: var(--fd-fw-bold); margin-top: 4px }

/* ---------- PASSI (orizzontali) e TACCHE (verticali) di livello ---------- */
.fd-passi { display: flex; gap: 4px }
.fd-passi i { flex: 1; height: 5px; border-radius: 3px; background: var(--fd-solco) }
.fd-passi i.si { background: var(--c-hex, var(--fd-flusso)); transform-origin: left; animation: fd-cresce var(--fd-t-ingresso) var(--fd-ease-out) both }
.fd-tacche { display: flex; gap: 4px }
.fd-tacche i { flex: 1; height: 8px; border-radius: 3px; background: var(--fd-solco) }
.fd-tacche i.si { background: var(--c-hex, var(--fd-oro)); transform-origin: bottom; animation: fd-lievita var(--fd-t-ingresso) var(--fd-ease-out) both }

/* ---------- RIPARTIZIONE proporzionale ---------- */
.fd-ripartizione { display: flex; gap: 3px; height: 12px; border-radius: 6px; overflow: hidden }
.fd-ripartizione i { min-width: 3px; transform-origin: left; animation: fd-cresce .9s var(--fd-ease-out) both }

/* ---------- TRACCIA: andamento che si disegna ---------- */
.fd-traccia svg { width: 100%; height: 44px; overflow: visible }
.fd-traccia .area { fill: rgba(var(--fd-oro-rgb),.16) }
.fd-traccia .linea { fill: none; stroke: var(--fd-oro-filo); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 1; animation: fd-traccia 1.6s var(--fd-ease-draw) both }

/* ---------- IMPULSO: onda che si irradia ---------- */
.fd-impulso { position: relative; width: 16px; height: 16px; flex: none }
.fd-impulso b { position: absolute; inset: 3px; border-radius: 50%; background: rgb(var(--c, var(--fd-regolare-rgb))) }
.fd-impulso i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgb(var(--c, var(--fd-regolare-rgb))); animation: fd-irradia 1.8s ease-out infinite }

/* ---------- ATMOSFERA: velo, alone e raggi del colore reale (sempre DIETRO le immagini) ---------- */
.fd-atmosfera { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0 }
.fd-atmosfera-velo { position: absolute; inset: -35%; animation: fd-deriva 16s ease-in-out infinite alternate;
  background: radial-gradient(circle at 80% 18%, rgba(var(--c),.3), transparent 38%), radial-gradient(circle at 15% 90%, rgba(var(--c2, var(--c)),.24), transparent 40%) }
.fd-alone { position: absolute; width: 100px; height: 100px; border-radius: 50%; filter: blur(12px); background: radial-gradient(circle at 40% 40%, rgba(var(--c),.8), transparent 62%); animation: fd-respira 4s ease-in-out infinite }
.fd-raggi { position: absolute; width: 96px; height: 96px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(var(--c),.35) 0 5deg, transparent 5deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 36%, #000 38%, transparent 70%); mask: radial-gradient(circle, transparent 36%, #000 38%, transparent 70%);
  animation: fd-gira 30s linear infinite }

/* ---------- RIPRODUZIONE: disco + equalizzatore ---------- */
.fd-disco { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--fd-vinile) center/cover; position: relative; box-shadow: var(--fd-ombra-disco) }
.fd-disco::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--fd-carta) }
.fd-disco.is-acceso { animation: fd-gira 5s linear infinite }
.fd-equalizzatore { display: flex; align-items: flex-end; gap: 2px; height: 18px; flex: none }
.fd-equalizzatore i { width: 3px; height: 100%; border-radius: 2px; background: var(--fd-voce); transform-origin: bottom; animation: fd-suona .9s ease-in-out infinite }
.fd-equalizzatore i:nth-child(2) { animation-duration: .83s; animation-delay: -.23s }
.fd-equalizzatore i:nth-child(3) { animation-duration: .96s; animation-delay: -.46s }
.fd-equalizzatore i:nth-child(4) { animation-duration: 1.09s; animation-delay: -.69s }

/* ---------- MUTO: tratteggio = segnale assente (solo guasti) ---------- */
.is-muto { border: 1.5px dashed var(--fd-tratteggio) !important; opacity: .7 }
.fd-muto { font-size: 11.5px; border: 1.5px dashed var(--fd-tratteggio); border-radius: 9px; padding: 1px 7px; white-space: nowrap }
.fd-assente { border: 1.5px dashed var(--fd-allerta) !important }

/* ---------- SCOSTAMENTO (delta numerico: salita, discesa, invarianza) ---------- */
.fd-scostamento {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--fd-font-dati); font-size: var(--fd-fs-etichetta); font-weight: var(--fd-fw-bold);
  font-variant-numeric: tabular-nums; line-height: 1; padding: 2px 7px; border-radius: var(--fd-r-pill);
  background: var(--fd-carta); color: var(--fd-matita);
}
.fd-scostamento--salita  { background: rgba(var(--fd-allerta-rgb), .12); color: var(--fd-allerta) }
.fd-scostamento--discesa { background: rgba(var(--fd-regolare-rgb), .12); color: var(--fd-regolare) }
.fd-scostamento--fermo   { background: var(--fd-carta); color: var(--fd-matita) }

/* ---------- PILLOLA (selettore interattivo di vista o filtro) ---------- */
.fd-pillola {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fd-fs-sommario); font-weight: var(--fd-fw-bold);
  padding: 6px 14px; border-radius: var(--fd-r-pill);
  border: 1px solid var(--fd-filo); background: var(--fd-carta);
  color: var(--fd-matita); cursor: pointer; font-family: inherit;
  transition: all var(--fd-t-pressione) var(--fd-ease-out);
}
.fd-pillola:hover { color: var(--fd-inchiostro); background: var(--fd-foglio); border-color: var(--fd-solco) }
.fd-pillola.is-acceso {
  background: var(--fd-foglio); color: var(--fd-inchiostro);
  border-color: var(--acc, var(--fd-oro));
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* ---------- CASELLA (campo d'inserimento numerico e valuta) ---------- */
.fd-casella {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--fd-carta); border: 1px solid var(--fd-filo);
  border-radius: var(--fd-r-stato); padding: 4px 10px;
  transition: border-color var(--fd-t-colore), box-shadow var(--fd-t-colore);
}
.fd-casella:focus-within {
  background: var(--fd-foglio); border-color: var(--fd-oro);
  box-shadow: 0 0 0 3px rgba(var(--fd-oro-rgb), .2);
}
.fd-casella .valuta {
  font-family: var(--fd-font-dati); font-size: var(--fd-fs-sommario);
  font-weight: var(--fd-fw-bold); color: var(--fd-matita); user-select: none;
}
.fd-casella input {
  font-family: var(--fd-font-dati); font-size: var(--fd-fs-cifra); font-weight: var(--fd-fw-black);
  color: var(--fd-inchiostro); font-variant-numeric: tabular-nums;
  border: none; background: transparent; outline: none; width: 85px; text-align: right;
}

/* ---------- MATRICE (tabella dati viva) ---------- */
.fd-matrice {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: var(--fd-fs-sommario); color: var(--fd-inchiostro);
}
.fd-matrice th {
  padding: 8px 10px; font-size: var(--fd-fs-occhiello); font-weight: var(--fd-fw-bold);
  color: var(--fd-grafite); letter-spacing: .8px; text-transform: uppercase;
  border-bottom: 1px solid var(--fd-solco); text-align: left;
}
.fd-matrice td {
  padding: 10px; border-bottom: 1px solid var(--fd-filo);
  font-family: var(--fd-font-dati); font-variant-numeric: tabular-nums;
}
.fd-matrice tr:hover td { background: var(--fd-carta) }
.fd-matrice .is-attivo {
  background: rgba(var(--fd-oro-rgb), .12) !important;
  font-weight: var(--fd-fw-black);
}