/* Calcolo Manodopera — grafica allineata ai siti Proiecta (proiecta.it, compiladgue.it):
   blu notte #143254, rosso #f24949, Montserrat, fondo grigio chiaro, angoli 10 px. */
@font-face { font-family: "Montserrat"; src: url("fonti/montserrat.woff2") format("woff2");
             font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --navy: #143254; --navy-2: #1c3f68; --red: #f24949; --red-ink: #da2323; --mark: #fde6e6;
  --bg: #f3f3f3; --paper: #ffffff; --ink: #143254; --muted: #55657a; --line: #d8dee6; --tint: #eaeff5;
  --ok: #1f6b45; --ok-wash: #e5f2ea; --warn: #8a5a00; --warn-wash: #fff4dc;
  --f-ui: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  /* nomi storici usati nei template */
  --blu: var(--navy); --blu-chiaro: var(--tint); --testo: var(--ink); --grigio: var(--muted); --bordo: var(--line);
  --sfondo: var(--bg); --verde: var(--ok); --verde-chiaro: var(--ok-wash); --ambra: var(--warn);
  --ambra-chiaro: var(--warn-wash); --rosso: var(--red-ink); --rosso-chiaro: var(--mark);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-ui); font-size: 15px; line-height: 1.55; color: var(--ink); background: var(--bg);
       -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--navy); text-decoration-color: var(--red); text-underline-offset: 3px; }
a:hover { color: var(--red-ink); }

/* testata */
header.barra { position: sticky; top: 0; z-index: 20; background: var(--navy); color: #fff; }
header.barra .in { max-width: 1440px; margin: 0 auto; padding: 0 24px; min-height: 64px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
header.barra .marchio { display: flex; flex-direction: column; line-height: 1.2; color: #fff; text-decoration: none; }
header.barra .marchio .nome { font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
header.barra .marchio .nome b { color: var(--red); font-weight: 700; }
header.barra .marchio .sub { font-size: 11px; color: rgba(255,255,255,.7); letter-spacing: .02em; }
header.barra nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
header.barra nav a { color: rgba(255,255,255,.88); text-decoration: none; font-size: 14px; font-weight: 500; padding: 6px 10px; border-radius: 8px; }
header.barra nav a:hover, header.barra nav a.attivo { background: rgba(255,255,255,.1); color: #fff; }
header.barra .chi { font-size: 12.5px; color: rgba(255,255,255,.75); }
header.barra .chi a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
header.barra .hbtn { color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; padding: 8px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,.35); }
header.barra .hbtn:hover { border-color: #fff; }
header.barra .hbtn.pri { background: var(--red); border-color: var(--red); }
header.barra .hbtn.pri:hover { background: var(--red-ink); border-color: var(--red-ink); }
header.barra .azioni-testata { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

main { width: 100%; max-width: 1440px; margin: 0 auto; padding: 28px 24px 40px; flex: 1; }
main.pieno { max-width: none; padding: 0; }

/* piede */
footer.piede { background: var(--navy); color: rgba(255,255,255,.8); font-size: 13px; }
footer.piede .in { max-width: 1440px; margin: 0 auto; padding: 14px 24px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
footer.piede .sp { flex: 1; }
footer.piede a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
footer.piede a.logo { border: 0; display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.72); }
footer.piede a.logo img { height: 18px; display: block; }

/* tipografia */
h1 { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; margin: 0 0 6px; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
h2 { font-size: 19px; margin: 28px 0 10px; font-weight: 600; letter-spacing: -.005em; }
h3 { font-size: 16px; margin: 18px 0 6px; font-weight: 600; }
.eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--red-ink); font-weight: 600; margin: 0; }
.sotto { color: var(--muted); margin: 0 0 22px; }
.nota { font-size: 13px; color: var(--muted); }

/* superfici */
.scheda { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; }
table.dati { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--paper); font-variant-numeric: tabular-nums;
             border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
table.dati th, table.dati td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.dati tr:last-child td { border-bottom: 0; }
table.dati th { background: var(--tint); font-weight: 600; font-size: 12.5px; color: var(--navy); letter-spacing: .01em; }
table.dati td.num, table.dati th.num { text-align: right; }
table.dati tr.evidenza td { background: #f7f9fc; }
table.dati input, table.dati select { width: 100%; }
table.dati.compatta th, table.dati.compatta td { padding: 6px 9px; font-size: 13px; }
table.dati.compatta th { width: 1%; white-space: nowrap; }

.etichetta { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; }
.etichetta.bozza, .etichetta.media { background: var(--warn-wash); color: var(--warn); }
.etichetta.validato { background: var(--ok-wash); color: var(--ok); }
.etichetta.annullato { background: #eceff3; color: #555; }
.etichetta.alta { background: var(--mark); color: var(--red-ink); }
.etichetta.bassa { background: #eef1f4; color: var(--muted); }
.contatore { display: inline-block; min-width: 19px; padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11.5px; font-weight: 700; text-align: center; line-height: 19px; }

.messaggio { padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; border-left: 4px solid currentColor; }
.messaggio.ok { background: var(--ok-wash); color: var(--ok); }
.messaggio.errore { background: var(--mark); color: var(--red-ink); }
.messaggio.avviso { background: var(--warn-wash); color: var(--warn); }

/* pulsanti: rosso pieno (principale), contorno blu (secondario) */
button, .bottone { font: inherit; font-size: 14.5px; font-weight: 600; padding: 9px 20px; border-radius: 10px; border: 1px solid var(--red);
                   background: var(--red); color: #fff; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
                   justify-content: center; gap: 8px; transition: background .15s, border-color .15s, transform .15s; }
button:hover, .bottone:hover { background: var(--red-ink); border-color: var(--red-ink); color: #fff; transform: translateY(-1px); }
button.secondario, .bottone.secondario { background: var(--paper); color: var(--navy); border-color: var(--line); }
button.secondario:hover, .bottone.secondario:hover { border-color: var(--navy); background: var(--paper); color: var(--navy); }
button.pericolo { background: var(--paper); color: var(--red-ink); border-color: var(--red); }
button.pericolo:hover { background: var(--mark); color: var(--red-ink); }
button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.bottone.grande { font-size: 16px; padding: 13px 26px; }

input, select, textarea { font: inherit; font-size: 14.5px; color: var(--ink); padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
textarea { width: 100%; min-height: 90px; resize: vertical; }

form.filtri { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; }
form.filtri label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); gap: 3px; }
form.in-riga { display: inline; }
form.in-riga button { padding: 4px 12px; font-size: 13px; }
.azioni { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; }

.campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 18px; }
.campi label { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); gap: 5px; font-weight: 500; }
.campi label.largo { grid-column: 1 / -1; }
.campi .riga { display: flex; gap: 6px; }
.campi .spunta-prova span { color: var(--warn); font-weight: 600; }
label.ccnl { display: block; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; margin: 6px 0; background: var(--paper); cursor: pointer; }
label.ccnl:hover { border-color: var(--navy); }
label.ccnl.senza { opacity: .65; cursor: default; }
label.ccnl .nota { display: block; margin-left: 22px; }

/* verifica decreti */
.griglia-verifica { display: grid; grid-template-columns: 300px minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.elenco-tabelle { max-height: calc(100vh - 260px); overflow: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.elenco-tabelle a { display: block; padding: 8px 12px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 13px; }
.elenco-tabelle a.attiva { background: var(--tint); border-left: 3px solid var(--red); }
.elenco-tabelle a .meta { color: var(--muted); font-size: 12px; }
.spunta { color: var(--ok); font-weight: 700; }
.pdf { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; max-height: calc(100vh - 200px); overflow: auto; position: sticky; top: 80px; }
.pdf img { width: 100%; display: block; }

.riepilogo { display: flex; gap: 32px; flex-wrap: wrap; }
.riepilogo div { display: flex; flex-direction: column; }
.riepilogo span.v { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.riepilogo div:first-child span.v { color: var(--red-ink); }
.riepilogo span.k { font-size: 12px; color: var(--muted); }
details { margin-top: 8px; }
details summary { cursor: pointer; color: var(--navy); font-weight: 600; }
tr.gestita td { opacity: .55; }

/* pagine d'accesso */
.login { max-width: 420px; margin: 7vh auto; }
.login h1 { font-size: 26px; }
.login label { display: block; margin: 14px 0 5px; font-size: 13px; color: var(--muted); font-weight: 500; }
.login input { width: 100%; }
.login .azioni button { width: 100%; }
.login .dopo { margin-top: 18px; font-size: 14px; color: var(--muted); text-align: center; }

/* ---------- home pubblica ---------- */
.hero { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: auto -120px -160px auto; width: 520px; height: 520px; border-radius: 50%;
               background: radial-gradient(circle, rgba(242,73,73,.22), rgba(242,73,73,0) 65%); pointer-events: none; }
.hero .in { max-width: 1200px; margin: 0 auto; padding: 72px 24px 80px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; position: relative; z-index: 1; }
.hero .eyebrow { color: #ff8a8a; }
.hero h1 { font-size: clamp(32px, 4.4vw, 48px); line-height: 1.08; margin: 12px 0 18px; color: #fff; }
.hero h1 em { font-style: normal; color: var(--red); }
.hero p.lead { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.85); margin: 0 0 28px; max-width: 560px; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .bottone.secondario { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.hero .bottone.secondario:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.06); }
.hero .garanzie { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 26px; font-size: 13px; color: rgba(255,255,255,.75); }
.hero .garanzie span::before { content: "✓"; color: var(--red); font-weight: 700; margin-right: 6px; }

/* anteprima del risultato (illustrazione costruita in HTML) */
.anteprima { background: var(--paper); color: var(--ink); border-radius: 16px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.45); overflow: hidden; transform: rotate(-1deg); }
.anteprima .testa { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--tint); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.anteprima .testa i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: inline-block; }
.anteprima .testa i:first-child { background: var(--red); }
.anteprima .corpo { padding: 18px 20px 20px; }
.anteprima .ogg { font-size: 12px; color: var(--muted); margin: 0 0 4px; }
.anteprima .tot { font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--red-ink); margin: 0; }
.anteprima .tot-k { font-size: 12px; color: var(--muted); margin: 0 0 14px; }
.anteprima table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.anteprima td { padding: 7px 0; border-top: 1px solid var(--line); }
.anteprima td.num { text-align: right; font-weight: 600; }
.anteprima .fonte { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.anteprima .fonte span { font-size: 11px; background: var(--tint); color: var(--navy); border-radius: 999px; padding: 3px 10px; font-weight: 600; }
.anteprima .fonte span.r { background: var(--mark); color: var(--red-ink); }

.sezione { max-width: 1200px; margin: 0 auto; padding: 72px 24px; }
.sezione.bianca { max-width: none; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sezione.bianca > .in { max-width: 1200px; margin: 0 auto; }
.sezione .titolo { max-width: 720px; margin-bottom: 36px; }
.sezione .titolo h2 { font-size: clamp(24px, 2.8vw, 32px); line-height: 1.15; margin: 10px 0 10px; }
.sezione .titolo p { color: var(--muted); margin: 0; font-size: 16px; }

.carte { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.carta { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.sezione.bianca .carta { background: var(--bg); border-color: transparent; }
.carta .ico { width: 42px; height: 42px; border-radius: 10px; background: var(--mark); color: var(--red-ink); display: grid; place-items: center; margin-bottom: 14px; }
.carta .ico svg { width: 22px; height: 22px; }
.carta h3 { margin: 0 0 6px; font-size: 16.5px; }
.carta p { margin: 0; color: var(--muted); font-size: 14.5px; }

.passi { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; counter-reset: passo; }
.passo { position: relative; padding: 22px 22px 22px 70px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.passo::before { counter-increment: passo; content: counter(passo); position: absolute; left: 22px; top: 20px; width: 34px; height: 34px; border-radius: 50%;
                 background: var(--navy); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 15px; }
.passo h3 { margin: 0 0 4px; font-size: 15.5px; }
.passo p { margin: 0; color: var(--muted); font-size: 14px; }

.settori { display: flex; flex-wrap: wrap; gap: 10px; }
.settori span { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 500; }
.settori span small { color: var(--muted); font-weight: 500; margin-left: 4px; }

.banda { background: var(--navy); color: #fff; border-radius: 18px; padding: 44px 40px; display: flex; gap: 28px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.banda h2 { margin: 0 0 6px; font-size: clamp(22px, 2.6vw, 28px); color: #fff; }
.banda p { margin: 0; color: rgba(255,255,255,.8); max-width: 620px; }

.richiesta { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; max-width: 1100px; margin: 0 auto; align-items: start; }
.richiesta .lato ul { padding-left: 18px; color: var(--muted); }
.richiesta .lato li { margin: 6px 0; }
.consenso { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); margin-top: 6px; }
.consenso input { margin-top: 3px; }
.trappola { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.testo-legale { max-width: 820px; }
.testo-legale h2 { font-size: 17px; }

@media (max-width: 900px) {
  .hero .in { grid-template-columns: 1fr; padding: 48px 20px 56px; gap: 40px; }
  .anteprima { transform: none; }
  .richiesta { grid-template-columns: 1fr; }
  .sezione { padding: 52px 20px; }
  .banda { padding: 32px 24px; }
}
@media (max-width: 1100px) { .griglia-verifica { grid-template-columns: 1fr; } .pdf { position: static; } }
@media (max-width: 640px) {
  header.barra .in { padding: 10px 16px; gap: 10px 16px; }
  main { padding: 20px 16px 32px; }
  header.barra .marchio .sub { display: none; }
  table.dati { display: block; overflow-x: auto; }
}
@media print { header.barra, footer.piede, .azioni, .messaggio.ok { display: none; } main { padding: 0; } body { background: #fff; } }
button, .bottone { white-space: nowrap; }
.campi label:has(input[type="checkbox"]) { flex-direction: row; align-items: center; gap: 8px; align-self: end; padding-bottom: 9px; }

/* prova gratuita: fascia ben visibile, niente stampa */
.fascia-prova { background: var(--mark); color: var(--red-ink); border: 1px solid #f7b9b9; border-left: 5px solid var(--red);
                border-radius: 10px; padding: 12px 16px; margin-bottom: 20px; font-size: 14px; }
.fascia-prova a { color: var(--red-ink); font-weight: 600; }
.solo-stampa { display: none; }
@media print {
  body.prova-gratuita main, body.prova-gratuita header, body.prova-gratuita footer { display: none !important; }
  body.prova-gratuita .solo-stampa { display: block; padding: 40px; font-size: 18px; color: #000; }
}

/* pulsante Home (icona casa, come compiladgue.it) */
header.barra .hbtn.casa { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; background: var(--red); border-color: var(--red); }
header.barra .hbtn.casa:hover, header.barra .hbtn.casa.attivo { background: var(--red-ink); border-color: var(--red-ink); }
header.barra .hbtn.casa svg { width: 20px; height: 20px; }
@media (max-width: 640px) {
  header.barra .hbtn.casa { order: 1; margin-left: auto; width: 36px; height: 36px; }
  header.barra .marchio { order: 0; }
  header.barra .azioni-testata, header.barra nav, header.barra .chi { order: 2; width: 100%; margin-left: 0; }
  header.barra .azioni-testata { flex-wrap: nowrap; }
  header.barra .azioni-testata .hbtn { flex: 1; text-align: center; padding: 7px 8px; font-size: 13px; }
}
/* CPV + «Cerca CCNL»: il campo si restringe, il pulsante resta intero; la cella occupa due colonne se c'è spazio */
.campi .riga { min-width: 0; }
.campi .riga input { flex: 1 1 auto; min-width: 0; width: 100%; }
.campi .riga button { flex: none; }
@media (min-width: 700px) { .campi label.cpv { grid-column: span 2; } }