/* assets/marketing/pagine/strumenti/genera-codice-fiscale.css — stili della sola pagina strumenti/genera-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 la lingua
         del marketing.

         IL VOCABOLARIO CONDIVISO NON SI COPIA QUI. Sta in assets/tf-article.css,
         gia' linkato sopra, ed e' lo stesso di /guide e /blog: .tfa-hero .tfa-wrap
         .tfa-crumb .tfa-eyebrow .tfa-h1 .tfa-sub .tfa-body .tfa-note .tfa-faq-h
         .tfa-q per l'articolo, .tfh-band .tfh-band--alt .tfh-card .tfh-ic .tfh-t
         .tfh-d .tfh-meta .tfh-help .tfh-btn .tfh-news .tfh-fine .tfh-err .tfh-ok
         .tfh-accent per l'hub. Qui sotto non c'e' una sola regola che le duplichi:
         se serve un ritocco di palette si tocca quel file, non questo.

         COSA RESTA BESPOKE, e perche': il WIDGET del calcolatore. Form, pannello
         del risultato, righe di dettaglio, anatomia dei 16 caratteri, esempio
         reale: nel vocabolario condiviso un calcolatore non esiste (le altre
         pagine sono articoli e indici). I MATERIALI pero' sono gli stessi delle
         classi condivise, esadecimale per esadecimale:
           crema  #fff7ed   bordo ambra #fde68a   ambra #f59e0b / #d97706 / #b45309
           inchiostro #0f172a   bordo neutro #e7e5e4   grigio riga #f4f1ec
         Zero blu, zero indaco, zero ciano, zero gradienti sgargianti: la versione
         di maggio aveva sfondo a griglia, saette fluttuanti, pannello esempio nero
         e riquadri icona blu/verdi. Erano l'unica cosa che stonava col guscio.
         ══════════════════════════════════════════════════════════════════════ */

      /* ── reveal del risultato ───────────────────────────────────────────────
         E' l'unico .tf-anim rimasto in pagina: il JS aggiunge .tf-in quando il
         codice e' pronto. Se togli queste regole il pannello resta a opacity:0 e
         il calcolatore sembra rotto pur avendo calcolato. Il blocco reduced-motion
         sta DOPO la regola base apposta: un @media non aggiunge specificita', se
         stesse prima non ne vincerebbe una e a motion ridotto il risultato
         resterebbe invisibile (l'animazione e' anche cio' che lo rende opaco). */
      @keyframes tf-fade-up { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:translateY(0) } }
      .tf-anim { opacity:0 }
      .tf-anim.tf-in { animation:tf-fade-up .5s cubic-bezier(.16,1,.3,1) both }
      @media (prefers-reduced-motion: reduce) {
        .tf-anim.tf-in { animation:none; opacity:1 }
      }

      /* ── testata: chevron del breadcrumb (i separatori di .tfa-crumb sono "/",
         qui sono icone: il testo visibile non si tocca, nemmeno un carattere).
         display:inline-block e' OBBLIGATORIO, non cosmetico: il preflight di
         Tailwind mette svg{display:block} e senza questa riga il breadcrumb si
         impila su tre righe (visto in render). ── */
      .tf-crumb-ic { display:inline-block; width:11px; height:11px; vertical-align:-1px }

      /* parola in evidenza dentro .tfa-sub — .tfa-sub non ha una regola per b */
      .tf-ink { color:#0f172a; font-weight:650 }

      /* chip di garanzia sotto il sommario: non esiste un equivalente condiviso
         (.tfh-trust e' una riga di testo con i puntini, e aggiungere i puntini
         vorrebbe dire aggiungere testo). Materiali di .tfh-ic. */
      .tf-chips { display:flex; flex-wrap:wrap; gap:9px; margin:22px 0 0 }
      .tf-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 12px;
        border-radius:999px; background:#fff7ed; border:1px solid #fde68a;
        color:#b45309; font-size:13px; font-weight:600 }
      .tf-chip svg { flex:none; width:14px; height:14px }

      /* ── impaginato dello strumento ── */
      .tf-tool { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,330px);
        gap:26px; align-items:start }
      .tf-aside-in { position:sticky; top:130px }
      .tf-side-stack { display:grid; gap:12px }
      .tf-side-stack .tfh-d { margin-bottom:0 }

      /* pannello del form: stessi materiali di .tfh-card, senza il lift in hover */
      .tf-panel { border:1px solid #e7e5e4; border-radius:20px; background:#fff;
        padding:clamp(22px,3vw,34px) }
      .tf-panel-head { display:flex; align-items:flex-start; gap:14px; margin-bottom:20px }
      .tf-panel-head .tfh-ic { margin-bottom:0 }
      .tf-panel-h { margin:0 0 4px; font-size:clamp(20px,2.2vw,25px); line-height:1.2;
        letter-spacing:-0.022em; font-weight:700; color:#0f172a }
      .tf-panel-d { margin:0; font-size:14px; line-height:1.55; color:rgba(15,23,42,.58) }

      /* ── form ── */
      .tf-form { display:grid; gap:18px; margin-top:20px }
      .tf-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px }
      .tf-label { display:block; margin-bottom:7px; font-size:12.5px; font-weight:650;
        letter-spacing:.01em; color:rgba(15,23,42,.62) }
      .tf-field { background:#fff; border:1px solid #e7e5e4; border-radius:12px;
        transition:border-color .15s, box-shadow .15s }
      /* stesso focus di .tfh-form input: ambra piena + alone al 14% */
      .tf-field:focus-within { border-color:#f59e0b; box-shadow:0 0 0 4px rgba(245,158,11,.14) }
      .tf-field--ic { display:flex; align-items:center; padding-left:14px }
      .tf-field--ic svg { flex:none; width:16px; height:16px; color:rgba(15,23,42,.38) }
      .tf-input { width:100%; min-width:0; padding:13px 16px; font:inherit; font-size:15px;
        color:#0f172a; background:transparent; border:0; outline:0 }
      .tf-input::placeholder { color:rgba(15,23,42,.38) }
      .tf-select { cursor:pointer }
      .tf-mono { font-family:'JetBrains Mono','SF Mono','Monaco',monospace; letter-spacing:.06em }
      .tf-hint { display:flex; align-items:center; gap:8px; margin:9px 0 0;
        font-size:12.5px; line-height:1.5; color:rgba(15,23,42,.52) }
      .tf-hint svg { flex:none; width:14px; height:14px; color:rgba(15,23,42,.38) }
      .tf-link { margin-left:auto; padding:0; border:0; background:none; font:inherit;
        font-size:12.5px; font-weight:650; color:#b45309; cursor:pointer;
        text-underline-offset:2px }
      .tf-link:hover { text-decoration:underline }

      /* ── TF-CF-IOS-2026-11-02 · suggerimenti del comune (al posto del datalist nativo,
         che su Safari iOS copriva il campo e si mangiava le lettere digitate).
         La lista e' riempita dal JS; display solo via [hidden], qui non si dichiara. ── */
      .tf-combo { position:relative }
      .tf-sugg { position:absolute; z-index:30; top:calc(100% + 6px); left:-1px; right:-1px;
        margin:0; padding:6px; list-style:none; max-height:236px; overflow-y:auto;
        -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
        background:#fff; border:1px solid #e7e5e4; border-radius:12px;
        box-shadow:0 12px 32px -12px rgba(15,23,42,.22) }
      .tf-sugg[hidden] { display:none }
      /* 44px di altezza: il bersaglio minimo per un dito */
      .tf-sugg-opt { display:flex; align-items:center; justify-content:space-between; gap:12px;
        min-height:44px; padding:0 12px; border-radius:8px; cursor:pointer;
        font-size:15px; color:#0f172a; -webkit-tap-highlight-color:transparent }
      .tf-sugg-opt:hover, .tf-sugg-opt[aria-selected="true"] { background:#fff7ed; color:#b45309 }
      .tf-sugg-code { flex:none; font-family:'JetBrains Mono','SF Mono','Monaco',monospace;
        font-size:12px; letter-spacing:.04em; color:rgba(15,23,42,.42) }
      /* mentre si compila il modulo la barra promo (tf-launchbar.js) esce dal basso:
         con la tastiera iOS aperta copriva la lista. body.tf-cf-typing lo mette il JS.
         Specificita' 0,3,1 contro lo .tf-lbar.is-in (0,2,0) iniettato dalla barra. */
      body.tf-cf-typing .tf-lbar.is-in { transform:translateY(calc(100% + 24px)) }

      /* ── TF-CF-IOS-2026-11-02 · Safari iOS ingrandisce la pagina quando prende il
         focus un campo con testo sotto i 16px, e resta ingrandita (la colonna scivola
         fuori dallo schermo). -webkit-touch-callout esiste solo su iOS: il desktop
         resta a 15px. ── */
      @supports (-webkit-touch-callout: none) {
        .tf-input { font-size:16px }
      }

      /* ── bottoni: il primario e' .tfh-btn condiviso, qui c'e' solo cio' che un
         <button> non eredita (border, cursor, font) e la variante neutra ── */
      .tf-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding-top:2px }
      .tf-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
        padding:12px 22px; border-radius:12px; border:0; cursor:pointer;
        font-family:inherit; font-size:14.5px; font-weight:600; line-height:1;
        transition:background-color .15s, border-color .15s }
      .tf-btn svg { flex:none; width:16px; height:16px }
      .tf-btn:focus-visible { outline:2px solid #b45309; outline-offset:2px }
      .tf-btn-ghost { color:#0f172a; background:#fff; border:1px solid #e7e5e4 }
      .tf-btn-ghost:hover { background:#fafaf9; border-color:#e0ddd7 }
      .tf-btn-end { margin-left:auto }
      /* #cf-error: il display lo mette il JS (none/flex), qui NON si dichiara */
      .tf-error { align-items:center; gap:9px; font-size:13.5px; font-weight:600 }
      .tf-error svg { flex:none; width:16px; height:16px }

      /* ── risultato ── */
      .tf-result-wrap { margin-top:24px }
      .tf-result { background:#fff7ed; border:1px solid #fde68a; border-radius:16px; padding:24px }
      .tf-result-head { display:flex; align-items:center; gap:10px; margin-bottom:14px }
      .tf-result-ok { flex:none; display:inline-flex; align-items:center; justify-content:center;
        width:26px; height:26px; border-radius:999px; background:#f59e0b; color:#fff }
      .tf-result-ok svg { width:14px; height:14px }
      .tf-result-lbl { font-size:11px; font-weight:700; letter-spacing:.1em;
        text-transform:uppercase; color:#b45309 }
      .tf-cf-display { font-family:'JetBrains Mono','SF Mono','Monaco',monospace;
        font-size:30px; font-weight:700; letter-spacing:3px; color:#b45309;
        text-align:center; padding:20px 14px; background:#fff; border-radius:12px;
        border:1.5px dashed #f59e0b }
      .tf-result-foot { display:flex; flex-wrap:wrap; align-items:center;
        justify-content:space-between; gap:12px; margin-top:16px }
      .tf-btn-copy { background:#fff; border:1px solid #fde68a; color:#b45309 }
      .tf-btn-copy:hover { background:#fffbeb }
      /* .tf-show la mette il JS dopo la copia */
      .tf-copy-feedback { display:inline-flex; align-items:center; gap:6px;
        font-size:13.5px; font-weight:600; opacity:0; transition:opacity .25s }
      .tf-copy-feedback svg { flex:none; width:15px; height:15px }
      .tf-copy-feedback.tf-show { opacity:1 }
      .tf-details { margin-top:14px; border:1px solid #e7e5e4; border-radius:14px;
        background:#fafaf9; overflow:hidden }
      .tf-details summary { cursor:pointer; padding:12px 16px; font-size:14px;
        font-weight:600; color:#0f172a }
      .tf-details summary:hover { background:#f4f1ec }
      .tf-details-body { border-top:1px solid #e7e5e4; background:#fff; padding:16px }
      /* righe generate dal JS (renderResult): i nomi delle classi sono un aggancio */
      .tf-detail { display:flex; justify-content:space-between; align-items:center; gap:16px;
        padding:9px 0; border-bottom:1px solid #f4f1ec; font-size:13.5px }
      .tf-detail:last-child { border-bottom:0 }
      .tf-detail-label { color:rgba(15,23,42,.55) }
      .tf-detail-range { color:rgba(15,23,42,.38) }
      .tf-detail-value { color:#0f172a; font-weight:650; font-size:13px;
        font-family:'JetBrains Mono','SF Mono','Monaco',monospace }

      /* ── anatomia dei 16 caratteri: la lista condivisa .tfa-steps non regge le
         etichette di intervallo ("12-15" non entra in un quadrato da 26px), quindi
         la riga resta bespoke — ma la pastiglia ha i materiali di .tfa-steps .sn ── */
      .tf-anatomy { margin-top:6px }
      .tf-feature-row { display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px;
        align-items:start; padding:13px 0; border-bottom:1px solid #f1f0ee }
      .tf-feature-row:last-child { border-bottom:0 }
      .tf-feature-row b { display:block; font-size:15px; font-weight:650; color:#0f172a;
        margin-bottom:3px }
      .tf-feature-row p { margin:0; font-size:14px; line-height:1.55; color:rgba(15,23,42,.58) }
      .tf-step-pill { display:inline-flex; align-items:center; justify-content:center;
        min-width:30px; height:26px; padding:0 8px; border-radius:9px; background:#fff7ed;
        border:1px solid #fde68a; color:#b45309; font-size:11.5px; font-weight:700;
        font-variant-numeric:tabular-nums }

      /* ── esempio reale: era un pannello nero con la CF gialla, adesso e' la
         stessa scheda crema del resto del marketing ── */
      .tf-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; align-items:start }
      .tf-dim { color:rgba(15,23,42,.45) }
      .tf-example { background:#fff7ed; border:1px solid #fde68a; border-radius:20px; padding:24px }
      .tf-ex-grid { display:grid; grid-template-columns:auto minmax(0,1fr); gap:9px 24px;
        margin-bottom:18px; font-size:13.5px; line-height:1.4 }
      .tf-ex-k { color:rgba(15,23,42,.52) }
      .tf-ex-v { font-family:'JetBrains Mono','SF Mono','Monaco',monospace; font-weight:650; color:#0f172a }
      .tf-ex-box { margin-bottom:14px; padding:18px; background:#fff; border:1px solid #fde68a;
        border-radius:14px }
      .tf-ex-lbl { margin-bottom:8px; font-size:10px; font-weight:700; letter-spacing:.2em;
        text-transform:uppercase; color:rgba(180,83,9,.75) }
      .tf-example-cf { font-family:'JetBrains Mono','SF Mono','Monaco',monospace;
        font-size:26px; font-weight:700; letter-spacing:3px; color:#b45309 }
      .tf-ex-chips { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px }
      .tf-example-chip { padding:8px 5px; text-align:center; background:#fff;
        border:1px solid #fde68a; border-radius:9px }
      .tf-ex-c { font-family:'JetBrains Mono','SF Mono','Monaco',monospace; font-size:13.5px;
        font-weight:700; color:#0f172a }
      .tf-ex-cl { margin-top:2px; font-size:10px; line-height:1.3; color:rgba(15,23,42,.5) }

      /* ── FAQ: le schede sono .tfa-q (condivise). Qui solo il blocco centrato.
         Il nome NON contiene "tf-faq": la guardia FAQ cerca div.tf-faq per il
         vecchio accordion e un falso positivo le farebbe vedere due pattern. ── */
      .tf-qa { max-width:760px; margin:0 auto }
      .tf-qa .tfa-eyebrow, .tf-qa .tfa-faq-h { text-align:center }
      .tf-qa .tfa-faq-h { margin-bottom:22px }
      /* .tfh-band ha 8px di padding sopra perche' nell'hub segue la hero */
      .tf-band-pad { padding-top:64px }

      @media (max-width:1023px) {
        .tf-tool { grid-template-columns:minmax(0,1fr) }
        .tf-aside-in { position:static }
        .tf-two { grid-template-columns:minmax(0,1fr); gap:44px }
      }
      @media (max-width:639px) {
        .tf-row { grid-template-columns:minmax(0,1fr) }
        .tf-panel { border-radius:16px }
        .tf-cf-display { font-size:20px; letter-spacing:2px; padding:18px 8px }
        .tf-example-cf { font-size:19px; letter-spacing:1.5px }
        .tf-ex-cl { font-size:9px }
        .tf-btn-end { margin-left:0 }
      }