/* Campi cliente della richiesta d'offerta — rfq.html
   ============================================================
   Le regole vengono dal banco `_rfq-campi-proposta.html` (10/09/2026).

   ⛔ IL DIFETTO DI IERI, e vale piu' della correzione — David, 11/09 h07:21:
      «il carrello e' illeggibile in dark mode».
   Spostando le regole dal banco avevo portato via ANCHE l'impalcatura del banco:
   un `:root{}` con `--ds-c-text:#15181B`, `--ds-c-surface:#FFFFFF`,
   `--ds-c-accent:#C0701A`, un `body{ background:#F2F4F5 }`, e perfino i tag
   `</style>`, `<link>`, `<style>` — HTML dentro un file .css.

   🔑 Perche' rompeva TUTTA la pagina e non solo i campi: questo foglio e'
   caricato DOPO `ds-tokens.css`, e un `:root{}` senza condizioni **vince per
   ordine**. Quindi ridichiarava i token del sito con i valori CHIARI mentre la
   pagina restava scura ⇒ testo quasi nero su fondo quasi nero, ovunque, non
   solo qui. Il banco e' fatto per stare da solo: ha il proprio tema perche' non
   ha il sito intorno. Dentro il sito quel tema e' un sabotaggio.

   ⚠️ E il tema del sito NON si legge da `prefers-color-scheme`: il banco aveva
   un `@media (prefers-color-scheme: dark)`, che qui non sarebbe mai servito a
   niente. Il sito e' dark-first e decide con `body.ds-dark` / `body.ds-light`
   (`site-chrome.js`). Un ripiego chiaro su un sito scuro e' il difetto stesso.

   ⇒ Qui restano SOLO le regole dei campi e dell'esito, e prendono i colori dai
   token del sito. Cosi' seguono il tema qualunque esso sia, senza saperlo.
   🔑 La regola generale: **un componente non dichiara mai i token, li consuma.**
   ============================================================ */

/* ── i campi ────────────────────────────────────────────────────────── */
.rfqf{ display: grid; gap: 14px; margin-top: 22px; }
.rfqf__riga{ display: grid; gap: 14px; }
@media (min-width: 620px){ .rfqf__riga--due{ grid-template-columns: 1fr 1fr; } }
.rfqf__campo{ display: flex; flex-direction: column; gap: 5px; }
.rfqf__campo label{ font-size: var(--ds-fs-sm, .92rem); font-weight: 600;
  color: var(--ds-c-text); }
.rfqf__campo label .ob{ color: var(--ds-c-accent); }

/* ⚠️ `background` e `color` vanno dichiarati TUTTI E DUE su ogni campo.
   Un input senza `background` prende quello del browser — bianco anche in
   dark — e il `color` del token chiaro ci finisce sopra invisibile. E' lo
   stesso errore di ieri in scala piccola: mezzo colore e' peggio di nessuno. */
.rfqf__campo input, .rfqf__campo select, .rfqf__campo textarea{
  font: inherit; color: var(--ds-c-text);
  background: var(--ds-c-bg-elevated, var(--ds-c-surface));
  border: 1px solid var(--ds-c-surface-border);
  border-radius: 4px; padding: 9px 11px; width: 100%;
}
.rfqf__campo textarea{ min-height: 88px; resize: vertical; }
.rfqf__campo input:focus-visible, .rfqf__campo select:focus-visible,
.rfqf__campo textarea:focus-visible{ outline: 2px solid var(--ds-c-focus, var(--ds-c-accent));
  outline-offset: 2px; }
.rfqf__campo input::placeholder, .rfqf__campo textarea::placeholder{
  color: var(--ds-c-text-tertiary); opacity: 1; }
.rfqf__aiuto{ font-size: var(--ds-fs-xs, .82rem); color: var(--ds-c-text-secondary); }

/* ⚠️ L'ESCA. Invisibile a chi guarda, non a chi legge il markup: un bot
   compila tutto quello che trova. NON si usa `display:none` puro, che i bot
   piu' accorti riconoscono e saltano — si toglie dal flusso e dal tab.  */
.rfqf__esca{ position: absolute; left: -9999px; width: 1px; height: 1px;
             overflow: hidden; }

.rfqf__privacy{ font-size: var(--ds-fs-sm, .92rem); color: var(--ds-c-text-secondary);
                border-top: 1px solid var(--ds-c-surface-border); padding-top: 14px; }
.rfqf__privacy b{ color: var(--ds-c-text); }
/* ⚠️ `--ds-c-text-tertiary` in scuro vale #6B6660: su #0C0C0C fa **3,44**, sotto
   il 4,5 minimo. Va bene per una didascalia decorativa, non per il rimando
   all'informativa privacy — che e' un obbligo, non un dettaglio. Resta il
   sottolineato punteggiato a dire che per ora non porta da nessuna parte. */
.rfqf__privacy .inerte{ text-decoration: underline dotted;
                        color: var(--ds-c-text-secondary); cursor: not-allowed; }

/* ---- esito dell'invio -------------------------------------------------- */
.rfq-esito{ margin-top: 20px;
  border: 1px solid var(--ds-c-surface-border);
  background: var(--ds-c-bg-elevated, transparent);
  color: var(--ds-c-text);
  border-radius: 10px; overflow: hidden; }
.rfq-esito__corpo{ padding: 18px 20px; display: grid; gap: 10px; }
.rfq-esito h2{ margin: 0; font-size: var(--ds-fs-lg, 1.15rem); color: var(--ds-c-text); }
.rfq-esito p{ margin: 0; color: var(--ds-c-text-secondary); }
.rfq-esito__rif{ font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: var(--ds-fs-sm, .92rem); letter-spacing: .04em; color: var(--ds-c-text); }
.rfq-esito__rif b{ font-size: 1.15em; }
.rfq-esito code{ font-family: ui-monospace, Menlo, monospace; font-size: .9em;
  background: var(--ds-c-surface); padding: 1px 5px; border-radius: 3px; }

/* ⚠️ LA FASCIA DELLA DIMOSTRAZIONE.
   Deve essere leggibile DA LONTANO, perche' il rischio non e' che se ne accorga
   chi la legge: e' che NON se ne accorga chi guarda lo schermo da tre metri
   mentre qualcun altro lo mostra. Per questo e' una barra piena e non una nota.
   🔑 Il suo giallo e il suo nero sono LETTERALI di proposito: e' un segnale di
   stato, non un elemento di tema, e deve restare identico in chiaro e in scuro. */
.rfq-esito--demo{ border-color: var(--ds-brand-yellow-dark, #F4B532); }
.rfq-esito__fascia{ background: var(--ds-brand-yellow-dark, #F4B532);
  color: #0C0C0C; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 9px 20px; font-size: var(--ds-fs-sm, .9rem); }
.rfq-esito--errore{ border-color: #B3261E; }
.rfq-esito--errore .rfq-esito__fascia{ background: #B3261E; color: #fff; }

/* Il rosso dell'errore: uno per il chiaro, uno piu' acceso per lo scuro, perche'
   #B3261E su fondo quasi nero e' leggibile a fatica. */
.rfq-campo--male input, .rfq-campo--male select{ border-color: #B3261E !important; }
.rfq-errore-campo{ color: #B3261E; font-size: var(--ds-fs-xs, .82rem); margin: 0; }
body.ds-dark .rfq-campo--male input, body.ds-dark .rfq-campo--male select{
  border-color: #F2705F !important; }
body.ds-dark .rfq-errore-campo{ color: #F2705F; }