/* assets/marketing/pagine/strumenti/verifica-codice-fiscale.css — stili della sola pagina strumenti/verifica-codice-fiscale.html
   TF-MKT-REFACTOR-2026-10-06 (passo meccanico): i blocchi <style> della pagina, byte per
   byte e nello stesso ordine. Il <link> sta dove stava il blocco nel <head>. */

/* ═══ [1] blocco nel <head> ═══ */
      /* ══════════════════════════════════════════════════════════════════
         TF-TOOLS-RESTYLE-2026-08-05 — il corpo di questa pagina parla ora la
         lingua del marketing: ambra #f59e0b / #d97706 / #b45309 su crema
         #fff7ed, bordi #fde68a, ink #0f172a. Prima era una palette tutta sua,
         fredda (smeraldo/teal), nata a maggio fuori dal sito.

         IL GROSSO DEL LAYOUT NON STA PIU' QUI: hero, bande, card, FAQ, note,
         bottoni e box d'aiuto arrivano da assets/tf-article.css (.tfh-* e
         .tfa-*), lo stesso vocabolario di guide.html e blog.html. Qui restano
         SOLO i pezzi che quel vocabolario non ha — il campo del codice fiscale
         e il pannello dell'esito — e li si tengono sulla palette calda.

         L'UNICA ECCEZIONE al "zero freddo": nel pannello esito verde e rosso
         non sono decorazione, SONO l'esito. Restano, con gli stessi toni che
         il vocabolario condiviso usa gia' per .tfh-ok (#047857) e .tfh-err
         (#b91c1c), su fondi tenui e senza gradienti.
         ══════════════════════════════════════════════════════════════════ */

      /* ── hero: pill di garanzia (il vocabolario condiviso non ha una pill) ── */
      .tf-chips { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin-top:22px; }
      .tf-chip { display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px; background:#fff7ed; border:1px solid #fde68a; color:#b45309; font-size:12.5px; font-weight:600; }
      .tf-chip svg { flex:none; width:13px; height:13px; }
      /* separatore del breadcrumb: .tfa-crumb usa una "/" testuale, qui la
         chevron esisteva gia' ed e' decorativa — non si tocca il testo. */
      /* display:inline-block OBBLIGATORIO (lezione di genera-codice-fiscale): il preflight
         Tailwind mette svg{display:block} e il breadcrumb si impilava su tre righe. */
      .tf-crumb-sep { display:inline-block; flex:none; width:11px; height:11px; vertical-align:-1px; color:rgba(15,23,42,.28); }

      @keyframes tf-fade-up { from { opacity:0; transform:translateY(20px) } to { opacity:1; transform:translateY(0) } }
      .tf-anim { opacity:0; }
      .tf-anim.tf-in { animation:tf-fade-up .7s cubic-bezier(.16,1,.3,1) both }
      /* l'override DOPO la base, o un @media non aggiunge specificita' e perde */
      @media (prefers-reduced-motion: reduce) { .tf-anim.tf-in { animation:none; opacity:1 } }

      /* ── la scheda dello strumento: stessa materia delle .tfh-card ── */
      .tf-card { background:#fff; border:1px solid #e7e5e4; border-radius:20px; box-shadow:0 18px 40px -30px rgba(180,83,9,.45); }
      .tf-field { position:relative; background:#fff; border:1px solid #e7e5e4; border-radius:14px; transition:border-color .15s, box-shadow .15s; }
      /* stesso focus di .tfh-form input, cosi' il campo si comporta come quelli del sito */
      .tf-field:focus-within { border-color:#f59e0b; box-shadow:0 0 0 4px rgba(245,158,11,.14); }
      .tf-input { width:100%; padding:14px 18px; font-size:15.5px; font-weight:500; color:#0f172a; background:transparent; border:0; outline:0; font-family:inherit; }
      .tf-cf-input { font-family:'JetBrains Mono','SF Mono','Monaco',monospace; font-size:24px; font-weight:600; letter-spacing:3px; text-align:center; text-transform:uppercase; }
      .tf-input::placeholder { color:rgba(15,23,42,.3); }
      .tf-label { display:block; margin-bottom:6px; font-size:13px; font-weight:600; color:rgba(15,23,42,.7); letter-spacing:.02em; }
      .tf-linkbtn { font:inherit; font-size:12px; font-weight:600; color:#b45309; background:none; border:0; padding:0; cursor:pointer; text-underline-offset:2px; }
      .tf-linkbtn:hover { text-decoration:underline; }

      /* l'ambra del bottone primario arriva da .tfh-btn: qui solo cio' che
         serve a un <button> (che .tfh-btn, nato per gli <a>, non porta). */
      .tf-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit; font-weight:600; font-size:14.5px; padding:12px 24px; border-radius:12px; border:0; cursor:pointer; line-height:1; }
      .tf-btn-ghost { color:#78350f; background:#fff; border:1px solid #fde68a; transition:background-color .15s; }
      .tf-btn-ghost:hover { background:#fff7ed; }
      .tf-btn-ghost svg { flex:none; width:16px; height:16px; }

      /* ── pannello esito: BESPOKE, non esiste nel vocabolario condiviso ── */
      .tf-result-valid { border:1px solid #a7f3d0; border-radius:16px; background:#f0fdf4; padding:22px; }
      .tf-result-invalid { border:1px solid #fecaca; border-radius:16px; background:#fef7f7; padding:22px; }
      .tf-result-head { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
      .tf-result-ic { display:flex; flex:none; align-items:center; justify-content:center; width:38px; height:38px; border-radius:11px; }
      .tf-result-ic svg { flex:none; width:19px; height:19px; }
      .tf-result-ic-ok { background:#d1fae5; border:1px solid #6ee7b7; color:#047857; }
      .tf-result-ic-err { background:#fee2e2; border:1px solid #fca5a5; color:#b91c1c; }
      .tf-result-t { display:flex; align-items:center; gap:8px; font-size:16.5px; font-weight:650; line-height:1.3; }
      .tf-result-s { margin-top:2px; font-size:13.5px; color:#b91c1c; }
      .tf-result-cf { margin-top:3px; font-family:'JetBrains Mono','SF Mono','Monaco',monospace; font-size:13.5px; font-weight:600; letter-spacing:1px; color:#047857; }
      .tf-result-box { border-radius:13px; background:#fff; border:1px solid #eceae7; padding:16px 18px; }
      .tf-result-lbl { margin-bottom:6px; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(15,23,42,.38); }
      .tf-result-p { margin:16px 0 0; font-size:13px; line-height:1.6; color:rgba(15,23,42,.62); }
      .tf-result-p strong { color:#0f172a; font-weight:650; }
      .tf-omo { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; background:#fff7ed; border:1px solid #fde68a; color:#b45309; font-size:11.5px; font-weight:600; white-space:nowrap; }
      .tf-omo svg { flex:none; width:12px; height:12px; }

      .tf-detail { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:10px 0; border-bottom:1px solid #f4f1ec; font-size:13.5px; }
      .tf-detail:last-child { border-bottom:0; padding-bottom:0; }
      .tf-detail-label { color:rgba(15,23,42,.58); font-weight:500; }
      .tf-detail-value { color:#0f172a; font-weight:600; text-align:right; }
      /* locali apposta: font-mono e text-amber-700 sarebbero utility Tailwind, e
         il bundle compilato non e' garantito che le contenga (vedi tf-tools.css) */
      .tf-mono { font-family:'JetBrains Mono','SF Mono','Monaco',monospace; letter-spacing:.5px; }
      .tf-detail-omo { color:#b45309; }

      @media (max-width:640px) {
        .tf-cf-input { font-size:18px; letter-spacing:2px; }
      }