/* assets/marketing/pagine/strumenti/verifica-partita-iva.css — stili della sola pagina strumenti/verifica-partita-iva.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> ═══ */
      /* 2026-09-05: display:inline-block OBBLIGATORIO sugli svg del breadcrumb (lezione di
         genera-codice-fiscale): il preflight Tailwind mette svg{display:block} e il
         percorso si impilava su tre righe. */
      .tfa-crumb svg { display:inline-block; vertical-align:-1px; }

      /* TF-TOOLS-RESTYLE-2026-08-05 — la pagina adotta il vocabolario condiviso del
         marketing (assets/tf-article.css: .tfa-* per testata/prosa/FAQ, .tfh-* per
         bande, card, bottone). Qui sotto resta SOLO il widget del calcolatore, che
         in quel vocabolario non ha equivalente: campo P.IVA monospaziato, pannello
         esito, righe di dettaglio, box anatomia. Palette identica al resto del sito
         — ambra #f59e0b/#d97706/#b45309, crema #fff7ed, bordo #fde68a, ink #0f172a,
         bordo neutro #e7e5e4. Zero blu: la vecchia palette blu/indaco/ciano di
         maggio era tutta e solo di queste 4 pagine. */

      /* ── impalcatura: griglia strumento + colonna laterale ─────────────── */
      .tf-tool-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,330px); gap:26px; align-items:start; }
      .tf-tool-aside { position:sticky; top:130px; display:flex; flex-direction:column; gap:16px; }
      .tf-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; padding-top:64px; }

      /* ── pannello bianco (nessun equivalente condiviso: .tfh-card e' un link
           con lift in hover, questo e' un contenitore) ────────────────────── */
      .tf-card { background:#fff; border:1px solid #e7e5e4; border-radius:20px;
        box-shadow:0 1px 2px rgba(15,23,42,.03), 0 18px 40px -30px rgba(180,83,9,.38); }
      .tf-pad { padding:clamp(22px,3vw,38px); }
      .tf-pad-sm { padding:22px; }
      .tf-panel-head { display:flex; align-items:flex-start; gap:13px; margin-bottom:24px; }
      .tf-panel-head .tfh-ic { flex:none; margin-bottom:0; }
      .tf-panel-h { margin:0; font-size:clamp(19px,2vw,23px); line-height:1.2; letter-spacing:-.02em; font-weight:700; color:#0f172a; }
      .tf-panel-s { margin:5px 0 0; font-size:14px; line-height:1.55; color:rgba(15,23,42,.58); }

      /* ── chip della testata: .tfh-trust e' una riga di testo coi puntini, non
           dei chip. Stessi materiali di .tfh-ic (crema + bordo #fde68a). ───── */
      .tf-chips { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:22px; }
      .tf-chip { display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px;
        border:1px solid #fde68a; background:#fff7ed; color:#b45309; font-size:12.5px; font-weight:600; }
      .tf-chip svg { flex:none; width:13px; height:13px; }

      /* ── campo P.IVA: focus ambra identico a .tfh-form input:focus ──────── */
      .tf-form { display:grid; gap:20px; }
      .tf-label { display:block; margin-bottom:7px; font-size:13px; font-weight:600; letter-spacing:.02em; color:rgba(15,23,42,.72); }
      .tf-field { position:relative; background:#fff; border:1px solid #e7e5e4; border-radius:12px; transition:border-color .15s, box-shadow .15s; }
      .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:inherit; font-size:15.5px; font-weight:500; color:#0f172a; background:transparent; border:0; outline:0; }
      .tf-input::placeholder { color:rgba(15,23,42,.3); }
      .tf-piva-input { font-family:'JetBrains Mono','SF Mono','Monaco',monospace; font-size:26px; font-weight:600; letter-spacing:4px; text-align:center; }
      .tf-fieldfoot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:9px; }
      .tf-count { font-size:12.5px; color:rgba(15,23,42,.5); }
      .tf-linkbtn { padding:0; border:0; background:none; font:inherit; font-size:12.5px; font-weight:600; color:#b45309; cursor:pointer; text-underline-offset:2px; }
      .tf-linkbtn:hover { text-decoration:underline; }

      /* ── bottoni: .tf-btn e' SOLO il reset del <button> (font, bordo, cursore);
           il colore lo mette .tfh-btn, la stessa classe dei bottoni marketing.
           Il ghost resta bespoke, sui neutri caldi (#e7e5e4 / #fafaf9). ────── */
      .tf-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
      .tf-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
        font:inherit; font-size:14.5px; font-weight:600; line-height:1; border:0; cursor:pointer; }
      .tf-btn-ghost { padding:12px 22px; border-radius:12px; background:#fff; border:1px solid #e7e5e4;
        color:rgba(15,23,42,.72); transition:background-color .15s, border-color .15s; }
      .tf-btn-ghost:hover { background:#fafaf9; border-color:#e0ddd8; }
      .tf-btn-ghost svg { flex:none; width:16px; height:16px; }
      /* .tfh-btn e' inline-flex e centra solo in verticale: a larghezza piena
         serve dire anche dove va il contenuto, o il testo resta a sinistra */
      .tf-btn-full { display:flex; width:100%; justify-content:center; }

      /* link dentro la copy: la preflight Tailwind fa `a{color:inherit}`, quindi
         senza questa classe i link in pagina restano grigi e muti */
      .tf-a { color:#b45309; font-weight:600; text-decoration:underline; text-decoration-color:rgba(180,83,9,.35); text-underline-offset:3px; }
      .tf-a:hover { text-decoration-color:#b45309; }

      /* ── pannello esito: nel vocabolario condiviso non esiste un "risultato".
           Bespoke, ma sugli esadecimali del marketing. Il rosso dell'errore e'
           quello di .tfh-err (#b91c1c), non una tinta nuova. ───────────────── */
      .tf-result { margin-top:28px; }
      .tf-res-ok { padding:24px; border:1px solid #f59e0b; border-radius:18px; background:linear-gradient(180deg,#fffbf5 0%,#fff7ed 100%); }
      .tf-res-ko { padding:24px; border:1px solid #ef4444; border-radius:18px; background:linear-gradient(180deg,#fff8f8 0%,#fee2e2 100%); }
      .tf-res-head { display:flex; align-items:center; gap:13px; }
      .tf-res-ok .tf-res-head { margin-bottom:18px; }
      .tf-res-ico { flex:none; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:999px; color:#fff; }
      .tf-res-ico svg { width:20px; height:20px; }
      .tf-res-ok .tf-res-ico { background:#f59e0b; }
      .tf-res-ko .tf-res-ico { background:#ef4444; }
      .tf-res-t { font-size:17px; font-weight:700; letter-spacing:-.01em; }
      .tf-res-ok .tf-res-t { color:#78350f; }
      .tf-res-ko .tf-res-t { color:#7f1d1d; }
      .tf-res-s { margin-top:3px; font-size:13.5px; }
      .tf-res-ok .tf-res-s { font-family:'JetBrains Mono','SF Mono','Monaco',monospace; font-weight:600; color:#b45309; }
      .tf-res-ko .tf-res-s { color:#b91c1c; }
      .tf-res-box { padding:18px 20px; border:1px solid #fde68a; border-radius:14px; background:#fff; }
      .tf-res-boxh { margin-bottom:4px; font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(15,23,42,.4); }
      .tf-res-note { margin:16px 0 0; font-size:13px; line-height:1.62; color:#78350f; }
      .tf-res-note b { font-weight:650; }
      .tf-detail { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 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,.6); font-weight:500; }
      .tf-detail-value { color:#0f172a; font-weight:650; text-align:right; }
      .tf-mono { font-family:'JetBrains Mono','SF Mono','Monaco',monospace; }

      /* ── anatomia della P.IVA: box scuro sull'ink del marketing (#0f172a, lo
           stesso del footer), alone e cifre in ambra ─────────────────────── */
      .tf-example { position:relative; overflow:hidden; padding:24px; border-radius:18px;
        background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%); color:#fff; }
      .tf-example::before { content:''; position:absolute; inset:0; pointer-events:none;
        background-image:radial-gradient(circle 300px at 80% 0%, rgba(245,158,11,.18), transparent); }
      .tf-ex-code { position:relative; z-index:1; text-align:center; font-family:'JetBrains Mono','SF Mono','Monaco',monospace;
        font-size:clamp(25px,3.4vw,34px); font-weight:700; letter-spacing:.05em; }
      .tf-ex-legend { position:relative; z-index:1; margin-top:20px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; text-align:center; }
      .tf-ex-legend div { padding:12px 8px; border:1px solid rgba(255,255,255,.1); border-radius:10px; background:rgba(255,255,255,.04); }
      .tf-ex-legend b { display:block; font-family:'JetBrains Mono','SF Mono','Monaco',monospace; font-size:12.5px; font-weight:700; }
      .tf-ex-legend span { display:block; margin-top:4px; font-size:11.5px; line-height:1.35; color:rgba(255,255,255,.55); }
      .tf-c1 { color:#fde68a; }
      .tf-c2 { color:#fbbf24; }
      .tf-c3 { color:#fff; }

      /* ── colonna laterale ───────────────────────────────────────────────── */
      .tf-aside-h { margin:0 0 12px; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(15,23,42,.4); }
      .tf-side-links { display:flex; flex-direction:column; gap:10px; }
      .tf-side-link { display:flex; align-items:center; gap:13px; padding:13px 14px; border:1px solid #e7e5e4; border-radius:14px;
        background:#fff; color:inherit; text-decoration:none; transition:border-color .15s, background-color .15s, transform .15s; }
      .tf-side-link:hover { border-color:#fde68a; background:#fff7ed; transform:translateX(2px); }
      .tf-side-link .tfh-ic { flex:none; margin-bottom:0; }
      .tf-side-copy { flex:1; min-width:0; }
      .tf-side-t { display:block; font-size:14.5px; font-weight:650; color:#0f172a; }
      .tf-side-d { display:block; margin-top:2px; font-size:12.5px; color:rgba(15,23,42,.55); }
      .tf-side-go { flex:none; width:16px; height:16px; color:rgba(15,23,42,.3); }

      /* box CTA laterale: stessa finitura di .tfh-help (crema + bordo #fde68a) */
      .tf-cta-box { padding:22px; border:1px solid #fde68a; border-radius:18px; background:#fff7ed; }
      .tf-cta-t { margin:0 0 6px; font-size:17px; font-weight:650; letter-spacing:-.01em; color:#0f172a; }
      .tf-cta-p { margin:0 0 18px; font-size:14px; line-height:1.6; color:rgba(15,23,42,.62); }

      @media (max-width:1023px) {
        .tf-tool-grid { grid-template-columns:minmax(0,1fr); }
        .tf-tool-aside { position:static; }
        .tf-two { grid-template-columns:minmax(0,1fr); gap:38px; padding-top:48px; }
      }
      @media (max-width:640px) {
        .tf-piva-input { font-size:18px; letter-spacing:2px; }
        .tf-ex-legend { grid-template-columns:minmax(0,1fr); }
        .tf-btn-ghost { flex:1; }
      }