/* ==========================================================================
   Componenti Nextfuture (dal 24/10/2026)
   ==========================================================================
   Lo stesso file è su nextfuture.it ed extravirginsoftware.it: se cambia uno,
   si copia nell'altro. Sono i componenti scelti dal catalogo (sigle tra
   parentesi): elenco che cambia la schermata (T4), tabella con ricerca (TB1),
   confronto (TB3), griglie su linee (G1) e a riquadri (G2), accordion a linee
   (A1), pulsanti (P1), modulo (F1), passi verticali (S2), numeri su linee (N1),
   recensioni su linee (R2), nota con bordo (AV1), riquadro diviso (C2), barra
   fissa da telefono (C3), precedente e successiva (PG2), indice laterale (I1).
   Il comportamento è in js/componenti.js.

   Il tema Martex ha `a:hover { color: #1f2914 !important }`: ogni pulsante
   fatto con <a> dichiara il suo colore al passaggio con !important, come fanno
   le classi hover-- del tema, o il testo diventa scuro sul fondo scuro.
   ========================================================================== */

:root {
    --nfc-verde: #7a9c30;
    --nfc-verde-hover: #5f7d1f;
    --nfc-verde-scuro: #3a4e1a;
    --nfc-notte: #1f2914;
    --nfc-notte-2: #26321a;
    --nfc-chiaro: #f6f8f1;
    --nfc-giallo: #c5bb28;
    --nfc-testo: #545a4e;
    --nfc-tenue: #8a8f84;
    --nfc-linea: #e3e6dc;
    --nfc-campo: #d6dacd;
    --nfc-ombra: 0 30px 60px -24px rgba(28, 40, 12, .35), 0 12px 24px -12px rgba(28, 40, 12, .2);
}

/* Icona a tratto accanto ai titoli: mai dentro una tessera colorata */
.nfc-ico { width: 26px; height: 26px; color: var(--nfc-verde); flex: none; display: inline-block; }
.nfc-ico svg { width: 100%; height: 100%; display: block; }
.nfc-si { display: inline-block; width: 18px; height: 18px; color: var(--nfc-verde); vertical-align: middle; }
.nfc-si svg { width: 100%; height: 100%; display: block; }
.nfc-no { color: #b9bdb3; }

/* ---------- T4: elenco che cambia la schermata ---------- */
.nfc-schede { display: grid; grid-template-columns: 1fr 1.25fr; gap: 50px; align-items: center; }
.nfc-schede-lista button { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--nfc-linea); padding: 20px 0; cursor: pointer; }
.nfc-schede-lista button:last-child { border-bottom: 1px solid var(--nfc-linea); }
.nfc-schede-lista button strong { display: flex; justify-content: space-between; gap: 16px; font: 600 1.1rem/1.3 'Plus Jakarta Sans', sans-serif; color: var(--nfc-tenue); }
.nfc-schede-lista button strong::after { content: "+"; font-weight: 400; color: var(--nfc-verde); }
.nfc-schede-lista button span { display: none; margin-top: 8px; font-size: .97rem; line-height: 1.55; color: var(--nfc-testo); }
.nfc-schede-lista button[aria-selected="true"] { border-top-color: var(--nfc-verde); box-shadow: inset 0 2px 0 var(--nfc-verde); }
.nfc-schede-lista button[aria-selected="true"] strong { color: var(--nfc-notte); }
.nfc-schede-lista button[aria-selected="true"] strong::after { content: "–"; }
.nfc-schede-lista button[aria-selected="true"] span { display: block; }
.nfc-schede-img img { width: 100%; height: auto; border-radius: 10px; box-shadow: var(--nfc-ombra); display: block; }

/* ---------- Tabelle ---------- */
.nfc-scorri { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nfc-tabella { width: 100%; border-collapse: collapse; font-size: .95rem; }
.nfc-tabella th, .nfc-tabella td { padding: 13px 14px; text-align: left; vertical-align: top; }
.nfc-tabella thead th { font: 600 .85rem/1.3 'Inter', sans-serif; }

/* TB1: righe pulite */
.nfc-righe thead th { border-bottom: 2px solid var(--nfc-notte); color: var(--nfc-notte); }
.nfc-righe tbody td { border-bottom: 1px solid var(--nfc-linea); color: var(--nfc-testo); }
.nfc-righe tbody td:first-child { font-weight: 700; color: var(--nfc-notte); }
.nfc-righe td.nfc-codice { white-space: nowrap; }
.nfc-righe tbody td small { display: block; color: var(--nfc-tenue); font-size: .85rem; margin-top: 3px; }
.nfc-cerca { position: relative; max-width: 460px; margin-bottom: 18px; }
.nfc-cerca input { width: 100%; height: 50px; border: 1px solid var(--nfc-campo); border-radius: 8px; padding: 0 16px 0 46px; font-size: 1rem; color: var(--nfc-notte); background: #fff; }
.nfc-cerca input:focus { outline: none; border-color: var(--nfc-verde); box-shadow: 0 0 0 3px rgba(122,156,48,.18); }
.nfc-cerca svg { position: absolute; left: 15px; top: 15px; width: 20px; height: 20px; color: var(--nfc-tenue); }
.nfc-cerca-esito { font-size: .88rem; color: var(--nfc-tenue); margin: -8px 0 14px; min-height: 1.2em; }
.nfc-vuoto { padding: 18px 14px; color: var(--nfc-tenue); }

/* TB1 da telefono: con .nfc-impila ogni riga diventa una scheda con le etichette (data-label) */
.nfc-dop { display: inline-block; margin-top: 4px; font-size: .8rem; font-weight: 600; color: #8a6d00; }
@media (max-width: 767px) {
    .nfc-impila thead { display: none; }
    .nfc-impila, .nfc-impila tbody, .nfc-impila tr, .nfc-impila td, .nfc-impila th { display: block; width: 100%; }
    .nfc-impila tbody tr { border-bottom: 1px solid var(--nfc-linea); padding: 14px 0; }
    .nfc-impila tbody tr:first-child { border-top: 2px solid var(--nfc-notte); }
    .nfc-impila tbody td, .nfc-impila tbody th { border: 0 !important; padding: 3px 0 !important; }
    .nfc-impila tbody td[data-label]::before { content: attr(data-label); display: block; font-size: .78rem; font-weight: 600; color: var(--nfc-tenue); margin-top: 6px; }
    .nfc-impila tbody td:first-child { font-size: 1.1rem; }
    .nfc-impila tbody td:first-child::before { display: none; }
}

/* TB3: confronto con colonna in evidenza */
.nfc-confronto { table-layout: fixed; min-width: 720px; }
.nfc-confronto th, .nfc-confronto td { text-align: center; border-bottom: 1px solid var(--nfc-linea); color: var(--nfc-testo); }
.nfc-confronto th:first-child, .nfc-confronto td:first-child { text-align: left; width: 34%; color: var(--nfc-notte); font-weight: 500; }
.nfc-confronto thead th { vertical-align: bottom; padding-bottom: 16px; }
.nfc-confronto thead th strong { display: block; font: 700 1.15rem/1.2 'Plus Jakarta Sans', sans-serif; color: var(--nfc-notte); }
.nfc-confronto thead th small { display: block; font-weight: 400; color: var(--nfc-tenue); margin-top: 4px; }
.nfc-confronto thead th a { color: inherit; }
.nfc-confronto .nfc-evid { background: #f3f6ec; }
.nfc-confronto thead .nfc-evid { box-shadow: inset 0 3px 0 var(--nfc-verde); border-radius: 8px 8px 0 0; }
.nfc-confronto tr.nfc-sez td { background: #fff; font: 700 .8rem/1 'Inter', sans-serif; letter-spacing: .02em; color: var(--nfc-tenue); padding-top: 26px; text-align: left; }
.nfc-confronto td small { color: var(--nfc-tenue); font-size: .82rem; line-height: 1.35; display: inline-block; }

/* ---------- G1: colonne su linee ---------- */
.nfc-colonne { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--nfc-linea); }
.nfc-colonne.nfc-4 { grid-template-columns: repeat(4, 1fr); }
.nfc-colonne.nfc-2 { grid-template-columns: repeat(2, 1fr); }
.nfc-colonne > div { padding: 28px 28px 28px 0; }
.nfc-colonne > div + div { padding-left: 28px; border-left: 1px solid var(--nfc-linea); }
/* Più righe: la prima voce di ogni riga riparte da sinistra, le righe successive hanno il filo sopra */
.nfc-colonne > div:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.nfc-colonne > div:nth-child(n+4) { border-top: 1px solid var(--nfc-linea); }
.nfc-colonne.nfc-4 > div:nth-child(3n+1) { padding-left: 28px; border-left: 1px solid var(--nfc-linea); }
.nfc-colonne.nfc-4 > div:nth-child(n+4) { border-top: 0; }
.nfc-colonne.nfc-4 > div:nth-child(4n+1) { padding-left: 0; border-left: 0; }
.nfc-colonne.nfc-4 > div:nth-child(n+5) { border-top: 1px solid var(--nfc-linea); }
.nfc-colonne.nfc-2 > div:nth-child(3n+1) { padding-left: 28px; border-left: 1px solid var(--nfc-linea); }
.nfc-colonne.nfc-2 > div:nth-child(n+4) { border-top: 0; }
.nfc-colonne.nfc-2 > div:nth-child(2n+1) { padding-left: 0; border-left: 0; }
.nfc-colonne.nfc-2 > div:nth-child(n+3) { border-top: 1px solid var(--nfc-linea); }
.nfc-colonne h3, .nfc-colonne h4 { display: flex; align-items: center; gap: 12px; font-size: 1.15rem; margin-bottom: 10px; }
.nfc-colonne p { margin-bottom: 0; }
.nfc-colonne .nfc-vai { display: inline-block; margin-top: 14px; }

/* ---------- G2: riquadri di misure diverse ---------- */
.nfc-mosaico { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(170px, auto); gap: 16px; }
.nfc-mosaico > div { border-radius: 12px; padding: 26px; background: var(--nfc-chiaro); display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.nfc-mosaico p { margin: 0; }
.nfc-mosaico h3, .nfc-mosaico h4 { font-size: 1.15rem; margin: 0 0 8px; }
.nfc-mosaico .nfc-num { font: 800 3rem/1 'Plus Jakarta Sans', sans-serif; color: var(--nfc-notte); letter-spacing: -.02em; }
.nfc-mosaico .nfc-alto { grid-row: span 2; grid-column: span 2; background: var(--nfc-notte-2); }
.nfc-mosaico .nfc-alto .nfc-num { font-size: 4.2rem; color: #fff; }
.nfc-mosaico .nfc-alto h3, .nfc-mosaico .nfc-alto h4, .nfc-mosaico .nfc-alto b { color: #fff; }
.nfc-mosaico .nfc-alto p { color: #c9d3b8; }
.nfc-mosaico .nfc-largo { grid-column: span 2; }
.nfc-mosaico .nfc-pieno { background: var(--nfc-verde); }
.nfc-mosaico .nfc-pieno .nfc-num, .nfc-mosaico .nfc-pieno p, .nfc-mosaico .nfc-pieno h4 { color: #fff; }

/* ---------- A1: accordion a linee ---------- */
.nfc-domande details { border-bottom: 1px solid var(--nfc-linea); }
.nfc-domande details:first-of-type { border-top: 1px solid var(--nfc-linea); }
.nfc-domande summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font: 600 1.08rem/1.4 'Plus Jakarta Sans', sans-serif; color: var(--nfc-notte); }
.nfc-domande summary::-webkit-details-marker { display: none; }
.nfc-domande summary::after { content: "+"; font: 400 1.6rem/1 'Inter', sans-serif; color: var(--nfc-verde); flex: none; }
.nfc-domande details[open] summary::after { content: "–"; }
.nfc-domande summary:hover { color: var(--nfc-verde-scuro); }
.nfc-domande details > div { padding: 0 60px 22px 0; }
.nfc-domande details > div p { margin-bottom: 10px; }
.nfc-domande details > div p:last-child { margin-bottom: 0; }
.nfc-domande h3.nfc-domande-gruppo { font-size: 1.25rem; margin: 46px 0 14px; }
.nfc-domande h3.nfc-domande-gruppo:first-child { margin-top: 0; }

/* ---------- P1: pulsanti ---------- */
.nfc-pulsanti { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.nfc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 6px; font: 600 1rem/1.2 'Inter', sans-serif; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.nfc-btn-pieno { background: var(--nfc-verde); color: #fff; }
a.nfc-btn-pieno:hover, button.nfc-btn-pieno:hover { background: var(--nfc-verde-hover); color: #fff !important; }
.nfc-btn-bordo { border-color: var(--nfc-notte); color: var(--nfc-notte); background: #fff; }
a.nfc-btn-bordo:hover, button.nfc-btn-bordo:hover { background: var(--nfc-notte); color: #fff !important; }
.nfc-link { font-weight: 600; color: var(--nfc-verde-scuro); text-decoration: none; border-bottom: 2px solid rgba(122,156,48,.35); padding-bottom: 2px; }
a.nfc-link:hover { border-color: var(--nfc-verde); color: var(--nfc-notte) !important; }

/* ---------- F1: modulo ---------- */
.nfc-modulo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.nfc-modulo .nfc-largo { grid-column: 1 / -1; }
.nfc-modulo label { display: block; font-weight: 600; color: var(--nfc-notte); font-size: .9rem; margin-bottom: 6px; }
.nfc-modulo input:not([type=checkbox]):not([type=radio]), .nfc-modulo textarea, .nfc-modulo select { width: 100%; border: 1px solid var(--nfc-campo); border-radius: 8px; padding: 13px 15px; font-size: 1rem; color: var(--nfc-notte); background: #fff; height: auto; }
.nfc-modulo input:focus, .nfc-modulo textarea:focus, .nfc-modulo select:focus { outline: none; border-color: var(--nfc-verde); box-shadow: 0 0 0 3px rgba(122,156,48,.18); }
.nfc-modulo small { display: block; color: var(--nfc-tenue); margin-top: 5px; font-size: .82rem; }

/* ---------- S2: passi verticali ---------- */
.nfc-passi { position: relative; max-width: 720px; }
.nfc-passi > div { position: relative; padding: 0 0 30px 46px; }
.nfc-passi > div::before { content: ""; position: absolute; left: 12px; top: 30px; bottom: 2px; width: 2px; background: var(--nfc-linea); }
.nfc-passi > div:last-child { padding-bottom: 0; }
.nfc-passi > div:last-child::before { display: none; }
.nfc-passi > div > span { position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--nfc-notte); color: #fff; font: 700 .85rem/26px 'Plus Jakarta Sans', sans-serif; text-align: center; }
.nfc-passi > div > small { display: block; color: var(--nfc-verde-scuro); font-weight: 600; margin-bottom: 2px; font-size: .85rem; }
.nfc-passi h3, .nfc-passi h4 { font-size: 1.15rem; margin-bottom: 8px; }
.nfc-passi p { margin-bottom: 0; }

/* ---------- N1: numeri su linee ---------- */
.nfc-numeri { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--nfc-linea); border-bottom: 1px solid var(--nfc-linea); }
.nfc-numeri > div { padding: 30px 24px; }
.nfc-numeri > div + div { border-left: 1px solid var(--nfc-linea); }
.nfc-numeri b { display: block; font: 800 2.6rem/1 'Plus Jakarta Sans', sans-serif; color: var(--nfc-notte); margin-bottom: 8px; letter-spacing: -.02em; }
.nfc-numeri p { margin: 0; }

/* ---------- R2: recensioni su linee ---------- */
.nfc-recensioni { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--nfc-linea); }
.nfc-recensioni > div { padding: 28px 28px 28px 0; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.nfc-recensioni > div + div { padding-left: 28px; border-left: 1px solid var(--nfc-linea); }
.nfc-recensioni p { margin: 10px 0 0; }
.nfc-stelle { color: var(--nfc-giallo); letter-spacing: 2px; font-size: 1rem; }
.nfc-autore { display: flex; align-items: center; gap: 14px; }
.nfc-autore img { width: 52px; height: 52px; border-radius: 50%; object-fit: contain; background: #fff; border: 1px solid var(--nfc-linea); }
.nfc-autore strong { display: block; color: var(--nfc-notte); }
.nfc-autore small { color: var(--nfc-tenue); }

/* ---------- AV1: nota con bordo ---------- */
.nfc-nota { border-left: 3px solid var(--nfc-verde); padding: 6px 0 6px 20px; margin: 26px 0; }
.nfc-nota strong { display: block; margin-bottom: 4px; color: var(--nfc-notte); }
.nfc-nota p { margin: 0; }

/* ---------- C2: riquadro diviso ---------- */
.nfc-bivio { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--nfc-linea); border-radius: 14px; overflow: hidden; background: #fff; }
.nfc-bivio > div { padding: 40px; }
.nfc-bivio > div + div { border-left: 1px solid var(--nfc-linea); background: var(--nfc-chiaro); }
.nfc-bivio h3 { font-size: 1.35rem; margin-bottom: 8px; }
.nfc-bivio .nfc-pulsanti { margin-top: 22px; }

/* ---------- C3: barra fissa in basso, solo da telefono ---------- */
.nfc-barra { display: none; }
@media (max-width: 767px) {
    .nfc-barra { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 990; background: #fff; border-radius: 12px; padding: 8px; box-shadow: 0 -4px 24px rgba(28,40,12,.22); transform: translateY(140%); transition: transform .25s; }
    .nfc-barra.visibile { transform: none; }
    .nfc-barra a { height: 46px; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 .95rem/1 'Inter', sans-serif; text-decoration: none; }
    .nfc-barra a svg { width: 18px; height: 18px; }
    .nfc-barra .nfc-barra-wa { border: 1px solid var(--nfc-linea); color: var(--nfc-notte); }
    .nfc-barra .nfc-barra-wa svg { fill: var(--nfc-verde); }
    .nfc-barra .nfc-barra-wa:hover { color: var(--nfc-notte) !important; }
    .nfc-barra .nfc-barra-demo { background: var(--nfc-verde); color: #fff; }
    .nfc-barra .nfc-barra-demo:hover { color: #fff !important; background: var(--nfc-verde-hover); }
    body.nfc-con-barra #back-to-top { bottom: 80px; }
}

/* ---------- PG2: precedente e successiva ---------- */
.nfc-sfoglia { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--nfc-linea); border-bottom: 1px solid var(--nfc-linea); }
.nfc-sfoglia a { padding: 22px 0; text-decoration: none; }
.nfc-sfoglia a + a, .nfc-sfoglia span + a { text-align: right; border-left: 1px solid var(--nfc-linea); padding-left: 22px; }
.nfc-sfoglia small { display: block; color: var(--nfc-tenue); margin-bottom: 3px; }
.nfc-sfoglia strong { color: var(--nfc-notte); font: 600 1.1rem/1.3 'Plus Jakarta Sans', sans-serif; }
.nfc-sfoglia a:hover strong { color: var(--nfc-verde-scuro); }

/* ---------- I1: indice laterale fisso ---------- */
.nfc-guida { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 56px; align-items: start; }
.nfc-indice { position: sticky; top: 110px; }
.nfc-indice small { display: block; font-weight: 600; color: var(--nfc-tenue); margin-bottom: 10px; font-size: .82rem; }
.nfc-indice a { display: block; padding: 6px 0; color: var(--nfc-testo); text-decoration: none; font-size: .95rem; line-height: 1.35; }
.nfc-indice a:hover { color: var(--nfc-notte) !important; }
.nfc-indice a.attivo { color: var(--nfc-notte); font-weight: 600; }
.nfc-indice a.attivo::before { content: ""; display: inline-block; width: 14px; height: 2px; background: var(--nfc-verde); vertical-align: middle; margin-right: 8px; }
.nfc-guida-testo > section { scroll-margin-top: 110px; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .nfc-schede, .nfc-bivio { grid-template-columns: 1fr; }
    .nfc-guida { grid-template-columns: minmax(0, 1fr); }
    .nfc-schede { gap: 30px; }
    .nfc-indice { display: none; }
    .nfc-bivio > div + div { border-left: 0; border-top: 1px solid var(--nfc-linea); }
    .nfc-colonne, .nfc-colonne.nfc-4, .nfc-colonne.nfc-2, .nfc-recensioni { grid-template-columns: 1fr; }
    .nfc-colonne > div + div, .nfc-colonne[class] > div:nth-child(n), .nfc-recensioni > div + div { padding-left: 0; border-left: 0; }
    .nfc-colonne > div + div, .nfc-colonne[class] > div:nth-child(n+2), .nfc-recensioni > div + div { border-top: 1px solid var(--nfc-linea); }
    .nfc-colonne > div, .nfc-recensioni > div { padding-right: 0; }
    .nfc-mosaico { grid-template-columns: 1fr 1fr; }
    .nfc-mosaico .nfc-alto { grid-column: span 2; grid-row: auto; }
    .nfc-numeri { grid-template-columns: 1fr 1fr; }
    .nfc-numeri > div:nth-child(3) { border-left: 0; }
    .nfc-numeri > div:nth-child(n+3) { border-top: 1px solid var(--nfc-linea); }
    .nfc-bivio > div { padding: 30px 24px; }
}
@media (max-width: 575px) {
    .nfc-modulo { grid-template-columns: 1fr; }
    .nfc-numeri b { font-size: 2.1rem; }
    .nfc-numeri > div { padding: 22px 16px; }
    .nfc-mosaico .nfc-num { font-size: 2.4rem; }
    .nfc-mosaico .nfc-alto .nfc-num { font-size: 3.2rem; }
    .nfc-domande details > div { padding-right: 0; }
    .nfc-sfoglia { grid-template-columns: 1fr; }
    .nfc-sfoglia a + a, .nfc-sfoglia span + a { text-align: left; border-left: 0; border-top: 1px solid var(--nfc-linea); padding-left: 0; }
}