/* ==== FatturaLampo — stile condiviso landing + app ==== */
:root {
  --blu: #1d4ed8;
  --blu-scuro: #1e3a8a;
  --blu-chiaro: #eff6ff;
  --inchiostro: #0f172a;
  --grigio: #64748b;
  --grigio-chiaro: #e2e8f0;
  --sfondo: #f8fafc;
  --bianco: #ffffff;
  --verde: #059669;
  --ambra: #d97706;
  --rosso: #dc2626;
  --raggio: 10px;
  --ombra: 0 1px 3px rgba(15, 23, 42, .08), 0 4px 16px rgba(15, 23, 42, .06);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--inchiostro);
  background: var(--sfondo);
  line-height: 1.6;
}

.container { max-width: 1060px; margin: 0 auto; padding: 0 24px; }

a { color: var(--blu); text-decoration: none; }

h1, h2, h3 { line-height: 1.2; }
h2 { font-size: 1.9rem; text-align: center; margin-bottom: 40px; }

/* Bottoni */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: var(--raggio);
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--ombra); }
.btn-primary { background: var(--blu); color: var(--bianco); }
.btn-primary:hover { background: var(--blu-scuro); color: var(--bianco); }
.btn-outline { border-color: var(--blu); color: var(--blu); background: transparent; }
.btn-sm { padding: 8px 16px; font-size: .9rem; }
.btn-lg { padding: 16px 34px; font-size: 1.15rem; }

/* Header */
.site-header {
  background: var(--bianco);
  border-bottom: 1px solid var(--grigio-chiaro);
  position: sticky; top: 0; z-index: 50;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.logo { font-size: 1.3rem; font-weight: 800; color: var(--inchiostro); }
.logo span { color: var(--blu); }
.site-header nav { display: flex; align-items: center; gap: 22px; }
.site-header nav a { color: var(--inchiostro); font-weight: 500; }
.site-header nav a.btn-primary { color: var(--bianco); }

/* Hero */
.hero { padding: 90px 0 70px; text-align: center; background: linear-gradient(180deg, var(--blu-chiaro), var(--sfondo)); }
.hero h1 { font-size: 2.6rem; max-width: 800px; margin: 0 auto 20px; }
.hero h1 em { color: var(--blu); font-style: normal; }
.hero-sub { font-size: 1.15rem; color: var(--grigio); max-width: 640px; margin: 0 auto 34px; }
.hero-cta { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hero-note { font-size: .9rem; color: var(--grigio); }

/* Features */
.features { padding: 80px 0; background: var(--bianco); }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.feature { padding: 28px; border: 1px solid var(--grigio-chiaro); border-radius: var(--raggio); background: var(--sfondo); }
.feature-icon { font-size: 1.8rem; margin-bottom: 12px; }
.feature h3 { margin-bottom: 8px; font-size: 1.1rem; }
.feature p { color: var(--grigio); font-size: .95rem; }

/* Pricing */
.pricing { padding: 80px 0; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 340px)); gap: 28px; justify-content: center; }
.price-card {
  background: var(--bianco); border: 1px solid var(--grigio-chiaro);
  border-radius: var(--raggio); padding: 34px; position: relative;
}
.price-card-pro { border: 2px solid var(--blu); box-shadow: var(--ombra); }
.badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--blu); color: var(--bianco); font-size: .8rem; font-weight: 700;
  padding: 3px 14px; border-radius: 999px;
}
.price { font-size: 2.4rem; font-weight: 800; margin: 10px 0 20px; }
.price span { font-size: 1rem; font-weight: 500; color: var(--grigio); }
.price-card ul { list-style: none; margin-bottom: 26px; }
.price-card li { padding: 6px 0; color: var(--inchiostro); font-size: .97rem; }
.price-card .btn { width: 100%; text-align: center; }
.pricing-note { text-align: center; color: var(--grigio); margin-top: 26px; }

/* FAQ */
.faq { padding: 70px 0; background: var(--bianco); }
.faq details {
  max-width: 720px; margin: 0 auto 12px; background: var(--sfondo);
  border: 1px solid var(--grigio-chiaro); border-radius: var(--raggio); padding: 16px 22px;
}
.faq summary { font-weight: 600; cursor: pointer; }
.faq details p { margin-top: 10px; color: var(--grigio); }

/* CTA finale */
.cta-final { padding: 80px 0; text-align: center; }
.cta-final h2 { margin-bottom: 26px; }

/* Footer */
.site-footer {
  padding: 34px 0; border-top: 1px solid var(--grigio-chiaro);
  text-align: center; color: var(--grigio); font-size: .9rem;
}
.footer-disclaimer { margin-top: 6px; font-size: .8rem; }

/* ============ BLOG / ARTICOLI ============ */
.articolo { max-width: 720px; margin: 0 auto; padding: 50px 24px 70px; }
.articolo h1 { font-size: 2rem; margin-bottom: 8px; }
.articolo .articolo-meta { color: var(--grigio); font-size: .9rem; margin-bottom: 30px; }
.articolo h2 { font-size: 1.35rem; text-align: left; margin: 34px 0 12px; }
.articolo p, .articolo li { margin-bottom: 14px; color: #334155; }
.articolo ul, .articolo ol { padding-left: 24px; margin-bottom: 14px; }
.articolo table { width: 100%; border-collapse: collapse; margin: 14px 0 20px; }
.articolo th, .articolo td { border: 1px solid var(--grigio-chiaro); padding: 8px 12px; text-align: left; }
.articolo th { background: var(--blu-chiaro); }
.articolo blockquote {
  border-left: 4px solid var(--blu); background: var(--blu-chiaro);
  padding: 14px 18px; border-radius: 0 8px 8px 0; margin-bottom: 14px; font-style: italic;
}
.cta-articolo {
  background: linear-gradient(135deg, var(--blu), var(--blu-scuro)); color: var(--bianco);
  border-radius: var(--raggio); padding: 26px; margin-top: 40px; text-align: center;
}
.cta-articolo h3 { margin-bottom: 8px; }
.cta-articolo p { color: rgba(255,255,255,.85); margin-bottom: 16px; }
.cta-articolo .btn { background: var(--bianco); color: var(--blu); }
.lista-articoli { max-width: 720px; margin: 0 auto; padding: 50px 24px 70px; }
.lista-articoli h1 { font-size: 2rem; margin-bottom: 30px; }
.card-articolo {
  display: block; background: var(--bianco); border: 1px solid var(--grigio-chiaro);
  border-radius: var(--raggio); padding: 22px 26px; margin-bottom: 16px; color: var(--inchiostro);
}
.card-articolo:hover { border-color: var(--blu); box-shadow: var(--ombra); }
.card-articolo h2 { font-size: 1.15rem; text-align: left; margin: 0 0 6px; color: var(--blu); }
.card-articolo p { color: var(--grigio); font-size: .95rem; margin: 0; }

/* ============ PAGINA GRAZIE ============ */
.grazie { max-width: 560px; margin: 0 auto; padding: 90px 24px; text-align: center; }
.grazie .emoji { font-size: 3.5rem; margin-bottom: 16px; }
.grazie h1 { margin-bottom: 14px; }
.grazie p { color: var(--grigio); margin-bottom: 12px; }
.grazie .btn { margin-top: 18px; }

/* ============ APP ============ */
.app-main { padding: 30px 0 60px; }
.app-layout { display: grid; grid-template-columns: minmax(360px, 480px) 1fr; gap: 30px; align-items: start; }

.pannello {
  background: var(--bianco); border: 1px solid var(--grigio-chiaro);
  border-radius: var(--raggio); padding: 24px; box-shadow: var(--ombra);
}
.pannello h2 { font-size: 1.05rem; text-align: left; margin: 0 0 14px; }
.pannello + .pannello { margin-top: 20px; }

.campo { margin-bottom: 12px; }
.campo label { display: block; font-size: .82rem; font-weight: 600; color: var(--grigio); margin-bottom: 3px; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--grigio-chiaro);
  border-radius: 7px; font-size: .95rem; font-family: inherit; background: var(--bianco);
  color: var(--inchiostro);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--blu); outline-offset: -1px; border-color: var(--blu);
}
.campi-riga { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.righe-testata {
  display: grid; grid-template-columns: 1fr 74px 96px 34px; gap: 8px;
  font-size: .78rem; font-weight: 600; color: var(--grigio); margin-bottom: 6px;
}
.riga-voce { display: grid; grid-template-columns: 1fr 74px 96px 34px; gap: 8px; margin-bottom: 8px; }
.riga-voce input { padding: 8px 10px; border: 1px solid var(--grigio-chiaro); border-radius: 7px; font-size: .92rem; width: 100%; }
.riga-voce .rimuovi {
  border: none; background: transparent; color: var(--rosso); font-size: 1.15rem;
  cursor: pointer; border-radius: 7px;
}
.riga-voce .rimuovi:hover { background: #fee2e2; }
.aggiungi-riga {
  background: var(--blu-chiaro); color: var(--blu); border: 1px dashed var(--blu);
  border-radius: 7px; padding: 8px 14px; font-weight: 600; cursor: pointer; width: 100%;
}

.azioni { display: flex; gap: 12px; margin-top: 20px; }
.azioni .btn { flex: 1; text-align: center; }

.contatore-fatture {
  text-align: center; font-size: .85rem; color: var(--grigio); margin-top: 14px;
}
.contatore-fatture strong { color: var(--inchiostro); }

/* Banner Pro / limite */
.banner-pro {
  background: linear-gradient(135deg, var(--blu), var(--blu-scuro));
  color: var(--bianco); border-radius: var(--raggio); padding: 22px; margin-top: 20px;
}
.banner-pro h3 { margin-bottom: 6px; }
.banner-pro p { font-size: .92rem; opacity: .9; margin-bottom: 14px; }
.banner-pro .btn { background: var(--bianco); color: var(--blu); }
.banner-pro input {
  width: 100%; padding: 9px 11px; border-radius: 7px; border: none;
  margin-bottom: 10px; font-size: .95rem;
}
.pro-attivo { background: #ecfdf5; border: 1px solid var(--verde); color: var(--verde);
  border-radius: var(--raggio); padding: 12px 18px; margin-top: 20px; font-weight: 600; text-align: center; }

/* Anteprima fattura */
.anteprima-wrap { position: sticky; top: 84px; }
.fattura {
  background: var(--bianco); border: 1px solid var(--grigio-chiaro); border-radius: var(--raggio);
  padding: 40px; box-shadow: var(--ombra); font-size: .92rem; min-height: 640px;
}
.fattura-testata { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 30px; }
.fattura-titolo { font-size: 1.7rem; font-weight: 800; color: var(--blu); letter-spacing: .02em; }
.fattura-meta { text-align: right; color: var(--grigio); }
.fattura-meta strong { color: var(--inchiostro); }
.fattura-parti { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; }
.fattura-parte h4 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--grigio); margin-bottom: 6px;
}
.fattura-parte p { white-space: pre-line; }

.fattura table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.fattura th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--grigio); border-bottom: 2px solid var(--inchiostro); padding: 8px 6px;
}
.fattura th:nth-child(2), .fattura td:nth-child(2),
.fattura th:nth-child(3), .fattura td:nth-child(3),
.fattura th:nth-child(4), .fattura td:nth-child(4) { text-align: right; }
.fattura td { padding: 9px 6px; border-bottom: 1px solid var(--grigio-chiaro); }

.fattura-totali { margin-left: auto; width: 300px; }
.fattura-totali .tot-riga { display: flex; justify-content: space-between; padding: 5px 6px; }
.fattura-totali .tot-finale {
  border-top: 2px solid var(--inchiostro); font-weight: 800; font-size: 1.08rem;
  margin-top: 6px; padding-top: 9px;
}
.fattura-note { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--grigio-chiaro);
  color: var(--grigio); font-size: .84rem; white-space: pre-line; }

@media (max-width: 900px) {
  .app-layout { grid-template-columns: 1fr; }
  .anteprima-wrap { position: static; }
  .hero h1 { font-size: 1.9rem; }
}

/* ============ BETA, XML, GUIDA SDI, PRO ============ */
.beta-banner {
  background: #fffbeb; border-bottom: 1px solid #fde68a; color: #92400e;
  font-size: .88rem; text-align: center; padding: 7px 0;
}
.campi-riga-3 { display: flex; gap: 12px; }
.campi-riga-3 > .campo { flex: 1 1 70px; min-width: 0; }
.campi-riga-3 > .campo:nth-child(2) { flex: 3 1 120px; }
.aiuto { font-size: .8rem; color: var(--grigio); margin-top: 4px; }
.label-check { display: flex !important; align-items: center; gap: 8px; font-size: .9rem !important; color: var(--inchiostro) !important; }
.label-check input { width: auto !important; }

.azioni-secondarie { justify-content: space-between; margin-top: 10px; }
.btn-link {
  background: none; border: none; color: var(--blu); font: inherit; font-size: .9rem;
  cursor: pointer; text-decoration: underline; padding: 4px 0;
}
.esito-xml { margin-top: 16px; border-radius: var(--raggio); padding: 14px 18px; font-size: .9rem; }
.esito-xml ul { margin: 6px 0 0 18px; }
.esito-errore { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.esito-ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.esito-ok .btn-link { color: #065f46; }

.guida-sdi {
  margin-top: 16px; background: var(--bianco); border: 1px solid var(--grigio-chiaro);
  border-radius: var(--raggio); padding: 14px 18px; font-size: .92rem;
}
.guida-sdi summary { font-weight: 700; cursor: pointer; }
.guida-sdi h4 { margin: 14px 0 6px; font-size: .95rem; }
.guida-sdi p { margin-top: 10px; }
.guida-sdi ol { padding-left: 20px; }
.guida-sdi li { margin-bottom: 6px; }
.guida-sdi code { background: var(--sfondo); padding: 1px 5px; border-radius: 4px; font-size: .85rem; word-break: break-all; }

.riquadro-pro {
  display: block; width: 100%; text-align: left; margin-top: 20px; cursor: pointer;
  background: var(--blu-chiaro); border: 1px dashed var(--blu); border-radius: var(--raggio);
  padding: 16px 18px; font: inherit; color: var(--inchiostro);
}
.riquadro-pro strong { display: block; margin: 6px 0 2px; color: var(--blu-scuro); }
.riquadro-pro span:last-child { font-size: .88rem; color: var(--grigio); }
.riquadro-pro:hover { box-shadow: var(--ombra); }
.badge-arrivo {
  display: inline-block; background: var(--ambra); color: var(--bianco); font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; vertical-align: middle;
}
.fattura-cortesia { margin-top: 18px; font-size: .75rem; color: var(--grigio); }

/* Modale Pro */
body.modale-aperta { overflow: hidden; }
.modale {
  position: fixed; inset: 0; z-index: 100; background: rgba(15, 23, 42, .55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modale-box {
  position: relative; background: var(--bianco); border-radius: 14px; box-shadow: var(--ombra);
  max-width: 520px; width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; padding: 28px;
}
.modale-box h2 { font-size: 1.35rem; text-align: left; margin: 0 30px 6px 0; }
.modale-box p { margin-bottom: 10px; color: #334155; font-size: .95rem; }
.modale-chiudi {
  position: absolute; top: 12px; right: 12px; border: none; background: transparent;
  font-size: 1.2rem; cursor: pointer; color: var(--grigio); width: 36px; height: 36px; border-radius: 8px;
}
.modale-chiudi:hover { background: var(--sfondo); }
.pro-prezzo { color: var(--grigio) !important; }
.pro-funzioni { list-style: none; margin: 0 0 14px; }
.pro-funzioni li { padding: 7px 0; border-bottom: 1px solid var(--grigio-chiaro); font-size: .92rem; color: #334155; }
.pro-nota { background: #fffbeb; border-radius: 8px; padding: 10px 12px; }
.wl-form { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.wl-form > label { font-size: .82rem; font-weight: 600; color: var(--grigio); }
.wl-form input[type=email] {
  padding: 10px 12px; border: 1px solid var(--grigio-chiaro); border-radius: 7px; font-size: 1rem; font-family: inherit;
}
.wl-form .wl-consenso { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; font-size: .85rem; color: #334155; }
.wl-consenso input { margin-top: 3px; flex: none; }
.wl-trappola { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.wl-esito { min-height: 1.2em; font-size: .9rem; margin: 0 !important; }
.wl-errore { color: var(--rosso) !important; }
.wl-ok { color: var(--verde) !important; font-weight: 600; }

/* Feedback: pulsante fisso, modale, toast "Ti è stato utile?" */
.fb-pulsante {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  background: var(--bianco); color: var(--inchiostro); border: 1px solid var(--grigio-chiaro);
  border-radius: 999px; padding: 8px 14px; font: inherit; font-size: .88rem; font-weight: 600;
  box-shadow: var(--ombra); cursor: pointer; opacity: .92;
}
.fb-pulsante:hover, .fb-pulsante:focus-visible { opacity: 1; border-color: var(--blu); color: var(--blu); }
.fb-form textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--grigio-chiaro); border-radius: 7px;
  font-size: .95rem; font-family: inherit; resize: vertical; min-height: 96px;
}
.fb-form textarea:focus, .fb-form input[type=email]:focus { outline: 2px solid var(--blu); outline-offset: -1px; border-color: var(--blu); }
.fb-gruppo { border: none; padding: 0; margin: 0 0 4px; }
.fb-gruppo legend { font-size: .82rem; font-weight: 600; color: var(--grigio); margin-bottom: 6px; padding: 0; }
.fb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-chip { position: relative; cursor: pointer; }
.fb-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fb-chip span {
  display: inline-block; padding: 6px 12px; border: 1px solid var(--grigio-chiaro); border-radius: 999px;
  font-size: .88rem; background: var(--bianco); color: var(--inchiostro); min-width: 36px; text-align: center;
}
.fb-chip:hover span { border-color: var(--blu); }
.fb-chip input:checked + span { background: var(--blu-chiaro); border-color: var(--blu); color: var(--blu-scuro); font-weight: 600; }
.fb-chip input:focus-visible + span { outline: 2px solid var(--blu); outline-offset: 2px; }
.fb-email { display: flex; flex-direction: column; gap: 6px; }
.fb-email[hidden] { display: none; }
.fb-email label { font-size: .82rem; font-weight: 600; color: var(--grigio); }
.fb-nota { font-size: .8rem !important; color: var(--grigio) !important; margin: 0 !important; }
.fb-toast {
  position: fixed; right: 16px; bottom: 64px; z-index: 95; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 6px;
  background: var(--bianco); border: 1px solid var(--grigio-chiaro); border-radius: var(--raggio);
  box-shadow: var(--ombra); padding: 10px 8px 10px 16px; font-size: .92rem;
}
.fb-toast-corpo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.fb-toast .btn-link { padding: 0; }
.fb-pollice {
  border: 1px solid var(--grigio-chiaro); background: var(--sfondo); border-radius: 8px;
  font-size: 1.15rem; line-height: 1; padding: 6px 10px; cursor: pointer;
}
.fb-pollice:hover, .fb-pollice:focus-visible { border-color: var(--blu); background: var(--blu-chiaro); }
.fb-toast-chiudi {
  border: none; background: transparent; color: var(--grigio); cursor: pointer;
  width: 30px; height: 30px; border-radius: 6px; font-size: .95rem;
}
.fb-toast-chiudi:hover { background: var(--sfondo); }

/* Landing: card beta */
.price-card .nota-card { font-size: .85rem; color: var(--grigio); margin: -10px 0 18px; }
.price-card-arrivo { border: 2px dashed var(--blu); }

@media (max-width: 600px) {
  .header-inner { height: auto; min-height: 64px; flex-wrap: wrap; gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  .site-header nav { gap: 14px; flex-wrap: wrap; }
  .container { padding: 0 16px; }
  .app-layout { grid-template-columns: minmax(0, 1fr); }
  .campi-riga { grid-template-columns: 1fr; }
  .fattura { padding: 20px; }
  .fattura-parti { grid-template-columns: 1fr; }
  .fattura-totali { width: 100%; }
  .azioni { flex-direction: column; }
  .fb-pulsante { right: 12px; bottom: 12px; padding: 7px 12px; font-size: .82rem; }
  .fb-toast { left: 16px; right: 16px; bottom: 60px; }
  .site-footer { padding-bottom: 64px; }
}

/* Stampa: solo la fattura */
@media print {
  body { background: var(--bianco); }
  .site-header, .pannello, .banner-pro, .pro-attivo, .azioni,
  .contatore-fatture, .site-footer, .colonna-form, .beta-banner, .modale,
  .fb-pulsante, .fb-toast { display: none !important; }
  .app-main { padding: 0; }
  .app-layout { display: block; }
  .fattura { border: none; box-shadow: none; border-radius: 0; padding: 0; min-height: 0; }
  .anteprima-wrap { position: static; }
}