/* CECCHINATO HR – Check-list · foglio di stile condiviso dai moduli [chr_autonomo] e [chr_presto]
   Scope: .chr-app (nessun conflitto con il tema né con il modulo [chr_assunzione]). Font Poppins locale. */
/* v5.2.0 — la pagina carica i WOFF2 (150 KB invece di 462). I .ttf restano
   nella cartella: servono a jsPDF per incorporare Poppins nel PDF e a GD per
   il captcha, ma non vengono piu' scaricati per mostrare il modulo. */
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/Poppins-Regular.woff2') format('woff2'), url('fonts/Poppins-Regular.ttf') format('truetype'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/Poppins-SemiBold.woff2') format('woff2'), url('fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/Poppins-Bold.woff2') format('woff2'), url('fonts/Poppins-Bold.ttf') format('truetype'); }

/* Token allineati al Workflow: stessi verdi, stesse ambre, stessi raggi.
   Prima erano quelli predefiniti di Tailwind e non c'entravano niente. */
.chr-app{ --brand:#28467D; --brand-600:#1B3159; --brand-soft:#eef2f9; --accent:#008DD2; --ink:#1e2d3d; --muted:#5f6b7a; --line:#dde3ea; --card:#fff; --ok:#1a7a4a; --warn:#d97706; --err:#c0392b; --radius:12px;
  font-family:'Poppins',system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial; color:var(--ink); }
.chr-app *{ box-sizing:border-box }
.chr-app .wrap{max-width:1100px; margin:28px auto 64px; padding:0 18px}
.chr-app [hidden]{ display:none !important }

/* ---------- intestazione del modulo ---------- */
.chr-app .intro{margin:0 0 18px}
.chr-app .intro .kicker{display:inline-flex; align-items:center; gap:8px; background:var(--brand-soft); color:var(--brand); border-radius:999px; padding:6px 15px; font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase}
.chr-app .intro h1{font-size:clamp(1.4rem,3vw,2rem); line-height:1.25; font-weight:700; color:var(--brand); margin:14px 0 8px; letter-spacing:-.01em}
.chr-app .intro p{margin:0; color:var(--muted); font-size:15px; line-height:1.6; max-width:70ch}

/* ---------- griglie ---------- */
.chr-app .grid{display:grid; gap:16px}
@media (min-width:900px){
  .chr-app .grid-2{grid-template-columns:1fr 1fr}
  .chr-app .grid-3{grid-template-columns:1fr 1fr 1fr}
}
.chr-app .row{display:flex; gap:12px}
.chr-app .row > *{flex:1}

/* ---------- card di sezione ---------- */
.chr-app .card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:0 2px 8px rgba(0,0,0,.06); position:relative;
  transition:box-shadow .2s ease, border-color .2s ease}
.chr-app .card:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,141,210,.14)}
.chr-app .card h2{font-size:18px; margin:0 0 10px; display:flex; align-items:center; gap:10px; color:var(--ink); line-height:1.3}
.chr-app .card h2 .num{flex:0 0 auto; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:var(--brand); color:#fff; font-size:13px; font-weight:700; transition:background .2s ease}
/* Sezione completata: il numero diventa una spunta. Lo stato si legge dove
   guardi gia', non in una barretta da 3px sopra la card. */
.chr-app .card.done h2 .num{background:var(--ok); font-size:0}
.chr-app .card.done h2 .num::after{content:"\2713"; font-size:15px; font-weight:700; line-height:1}
.chr-app .card .sub{color:var(--muted); font-size:13px; margin:0 0 14px; line-height:1.5}
.chr-app .card .grid + .grid{margin-top:12px}

/* ---------- campi ---------- */
.chr-app label{font-size:14px; font-weight:600; color:#334155; display:block; margin-bottom:6px}
.chr-app label .opt{font-weight:400; color:var(--muted)}
.chr-app input[type="text"], .chr-app input[type="email"], .chr-app input[type="date"], .chr-app input[type="number"], .chr-app select, .chr-app textarea{
  width:100%; border:1px solid var(--line); border-radius:8px; padding:11px 13px; font-size:16px; background:#fff; color:var(--ink); font-family:inherit; font-variant-numeric:tabular-nums; outline:none; transition:border-color .2s, box-shadow .2s}
.chr-app textarea{min-height:90px; resize:vertical}
.chr-app input:hover:not(:focus), .chr-app select:hover:not(:focus), .chr-app textarea:hover:not(:focus){border-color:#c3d0ea}
.chr-app input:focus, .chr-app select:focus, .chr-app textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,141,210,.14)}
.chr-app .with-unit{position:relative}
.chr-app .with-unit input{padding-right:40px}
.chr-app .with-unit .unit{position:absolute; right:13px; top:50%; transform:translateY(-50%); color:var(--muted); font-weight:600; font-size:14px; pointer-events:none}
.chr-app .field-hint{font-size:12px; margin-top:5px; line-height:1.35; display:none; font-weight:600}
.chr-app .field-hint.show{display:block; color:var(--muted); font-weight:500}
.chr-app .field-hint.ok{display:block; color:var(--ok)}
.chr-app .field-hint.err{display:block; color:var(--err)}
.chr-app .field-hint.warn{display:block; color:#b45309}
.chr-app .help{font-size:12.5px; color:var(--muted); margin-top:5px; line-height:1.4}

/* ---------- chips ---------- */
.chr-app .chips{display:flex; gap:6px; flex-wrap:wrap}
.chr-app .chip{border:1px solid var(--line); background:#fff; padding:7px 13px 7px 11px; border-radius:999px; cursor:pointer; user-select:none; font-size:13.5px; font-weight:500; min-height:36px; line-height:1.3; transition:all .18s ease; display:inline-flex; align-items:center; gap:7px; position:relative}
.chr-app .chip::before{content:"\2713"; font-size:11px; font-weight:900; width:0; overflow:hidden; opacity:0; transition:width .18s ease, opacity .18s ease}
.chr-app .chip:hover{border-color:var(--accent); background:var(--brand-soft)}
.chr-app .chip:focus-visible{outline:3px solid rgba(40,70,125,.45); outline-offset:2px}
.chr-app .chip[data-active="true"]{background:var(--brand); color:#fff; border-color:var(--brand)}
.chr-app .chip[data-active="true"]::before{width:12px; opacity:1}
.chr-app .chips[aria-invalid="true"]{box-shadow:0 0 0 3px rgba(239,68,68,.35); border-radius:12px; padding:6px}

/* ---------- avvisi ---------- */
.chr-app .note{margin-top:10px; border:1px solid rgba(40,70,125,.25); border-left:4px solid var(--brand); background:#eef2f9; border-radius:0; padding:12px 14px; font-size:13px; color:#1e3a6e; line-height:1.45; display:flex; gap:10px; align-items:flex-start}
.chr-app .note .ico{flex:0 0 auto; width:22px; height:22px; border-radius:999px; display:grid; place-items:center; background:rgba(40,70,125,.14); border:1px solid rgba(40,70,125,.3); font-weight:800; line-height:1; margin-top:1px; font-size:12px}
.chr-app .note p{margin:0}
.chr-app .note p + p{margin-top:6px}
.chr-app .note.warn{border-radius:0; border-color:#fde3b8; border-left-color:var(--warn); background:#fffbeb; color:#854f0b}
.chr-app .note.warn .ico{background:#fdeccb; border-color:#f0cd90; color:#854f0b}
.chr-app .note.danger{border-radius:0; border-color:#f5c9c4; border-left-color:var(--err); background:#fef2f2; color:#8f2a1e}
.chr-app .note.danger .ico{background:#fadcd8; border-color:#eeb2ab; color:#8f2a1e}
.chr-app .note.ok{border-radius:0; border-color:#bfe5d1; border-left-color:var(--ok); background:#eafaf1; color:#12603a}
.chr-app .note.ok .ico{background:#d7f0e2; border-color:#a6d9bd; color:#12603a}
.chr-app .legal-alert{margin-top:12px; border:1px solid var(--line); background:#fafafa; border-left:4px solid var(--brand); padding:12px 14px; border-radius:12px; font-size:13px; color:#111827}

/* ---------- riepilogo numerico (compenso / limiti) ---------- */
.chr-app .kpis{display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:12px}
@media (min-width:720px){ .chr-app .kpis{grid-template-columns:repeat(4,minmax(0,1fr))} }
.chr-app .kpi{background:var(--brand-soft); border:1px solid rgba(40,70,125,.14); border-radius:12px; padding:10px 12px}
.chr-app .kpi small{display:block; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent)}
.chr-app .kpi strong{display:block; font-size:18px; color:var(--brand); margin-top:3px; font-variant-numeric:tabular-nums}
.chr-app .kpi.warn{background:#fff8e1; border-color:rgba(245,158,11,.4)} .chr-app .kpi.warn small{color:#b45309} .chr-app .kpi.warn strong{color:#7c5b00}
.chr-app .kpi.danger{background:#fdecec; border-color:rgba(185,28,28,.3)} .chr-app .kpi.danger small{color:#b91c1c} .chr-app .kpi.danger strong{color:#7f1d1d}
.chr-app .kpi.ok{background:#eafaf4; border-color:rgba(16,185,129,.3)} .chr-app .kpi.ok small{color:#059669} .chr-app .kpi.ok strong{color:#065f46}
.chr-app .meter{height:8px; border-radius:999px; background:#e2e8f0; overflow:hidden; margin-top:8px}
.chr-app .meter i{display:block; height:100%; width:0; border-radius:999px; background:var(--ok); transition:width .4s ease}
.chr-app .meter.warn i{background:var(--warn)}
.chr-app .meter.danger i{background:var(--err)}

/* ---------- semaforo ammissibilità ---------- */
.chr-app .verdict{display:flex; gap:14px; align-items:flex-start; border-radius:14px; padding:16px 18px; border:1px solid var(--line); background:#f8fafc}
.chr-app .verdict .light{flex:0 0 auto; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:900; font-size:20px; background:#94a3b8; box-shadow:0 6px 16px rgba(2,6,23,.15)}
.chr-app .verdict strong{display:block; font-size:16px; margin-bottom:4px}
.chr-app .verdict p{margin:0; font-size:13.5px; color:#334155; line-height:1.5}
.chr-app .verdict ul{margin:8px 0 0; padding-left:18px; font-size:13px; color:#334155}
.chr-app .verdict.green{background:#eafaf4; border-color:rgba(16,185,129,.35)} .chr-app .verdict.green .light{background:#10b981}
.chr-app .verdict.amber{background:#fff8e1; border-color:rgba(245,158,11,.45)} .chr-app .verdict.amber .light{background:#f59e0b}
.chr-app .verdict.red{background:#fdecec; border-color:rgba(185,28,28,.35)} .chr-app .verdict.red .light{background:#dc2626}

/* ---------- check-list documenti ---------- */
.chr-app .docs{display:grid; gap:8px 16px}
@media (min-width:720px){ .chr-app .docs{grid-template-columns:1fr 1fr} }
.chr-app .docs label{display:flex; align-items:flex-start; gap:10px; font-weight:500; color:var(--ink); margin:0; padding:8px 0; border-bottom:1px dotted var(--line); cursor:pointer}
.chr-app .docs input[type="checkbox"]{margin-top:3px; width:18px; height:18px; accent-color:var(--brand); flex:0 0 auto}
.chr-app .checkrow{display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid var(--line)}
.chr-app .checkrow:last-child{border-bottom:none}
.chr-app .checkrow input[type="checkbox"]{margin-top:3px; width:18px; height:18px; accent-color:var(--brand); flex:0 0 auto}
.chr-app .checkrow label{margin:0; color:var(--ink); font-size:14px; font-weight:500; cursor:pointer; line-height:1.45}
.chr-app .checkrow[aria-invalid="true"]{background:rgba(239,68,68,.06); border-radius:8px; padding:10px 8px}

/* ---------- pulsanti ---------- */
.chr-app .btn{appearance:none; border:1px solid var(--brand); background:var(--brand); color:#fff; padding:12px 24px; border-radius:8px; font-weight:600; font-size:15px; cursor:pointer; font-family:inherit; transition:background .18s ease; position:relative; overflow:hidden}
.chr-app .btn:hover{background:var(--brand-600); border-color:var(--brand-600)}
.chr-app .btn:active{transform:translateY(0)}
.chr-app .btn.ghost{background:transparent; color:var(--ink); border-color:var(--line); box-shadow:none}
.chr-app .btn.ghost:hover{background:#f8fafc}
.chr-app .btn:disabled{opacity:.55; cursor:not-allowed; transform:none}
.chr-app .btn.mini{padding:9px 16px; font-size:13px; box-shadow:0 4px 12px rgba(40,70,125,.22)}
.chr-app .btn.ghost.mini{box-shadow:none}
@keyframes chr-spin{to{transform:rotate(360deg)}}
.chr-app .btn .spinner{display:inline-block; width:16px; height:16px; border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:chr-spin .6s linear infinite; vertical-align:middle; margin-right:8px}

/* ---------- toolbar (avanzamento + reimposta) ---------- */
.chr-app .actions{display:flex; flex-direction:column; align-items:center; gap:10px; border-top:1px solid var(--line); padding:14px 0; margin-top:18px}
.chr-app .actions-core{display:flex; flex-direction:column; align-items:center; gap:10px; width:100%}
.chr-app .actions-core.is-docked{position:fixed; bottom:0; left:0; right:0; z-index:9999; background:rgba(248,250,252,.93); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-top:1px solid var(--line); padding:8px 16px calc(8px + env(safe-area-inset-bottom)); box-shadow:0 -10px 34px rgba(2,6,23,.12); gap:6px}
.chr-app .actions-row{display:flex; align-items:flex-end; gap:18px; width:100%; max-width:900px; margin:0 auto}
.chr-app .progress{flex:1 1 0; min-width:0}
.chr-app .progress .meta{display:flex; justify-content:space-between; font-size:12px; font-weight:700; letter-spacing:.03em; color:#334155; margin-bottom:6px}
.chr-app .progress .meta span:first-child{flex:1 1 auto; margin-right:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chr-app .progress .meta .pct{color:var(--brand)}
.chr-app .progress .track{height:8px; border-radius:999px; background:#e2e8f0; overflow:hidden}
.chr-app .progress .fill{height:100%; width:0%; border-radius:999px; background:var(--ok); transition:width .45s cubic-bezier(.22,1,.36,1)}
.chr-app .progress .fill.done{background:var(--ok)}
.chr-app .btn-reset{flex:0 0 auto; padding:8px 16px; font-size:13px; font-weight:600; box-shadow:none; white-space:nowrap}
.chr-app .msg-ok{color:var(--ok); font-size:13px; margin-top:6px; display:none}
.chr-app .msg-err{color:var(--err); font-size:13px; margin-top:6px; display:none}
@media (max-width:480px){ .chr-app .actions-row{flex-wrap:wrap; gap:8px} .chr-app .progress{flex-basis:100%} .chr-app .btn-reset{margin-left:auto} }

/* ---------- bozza ---------- */
.chr-app .draftbar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; background:var(--brand-soft); border:1px solid rgba(40,70,125,.3); border-left:4px solid var(--brand); border-radius:0; padding:12px 16px; margin-bottom:16px; font-size:14px; color:var(--ink); box-shadow:none}
.chr-app .draftbar .draft-actions{display:inline-flex; gap:8px; flex-wrap:wrap}

/* ---------- campi non validi ---------- */
@keyframes chr-blink-invalid{0%,100%{border-color:var(--err); box-shadow:0 0 0 3px rgba(239,68,68,.35)} 50%{border-color:var(--line); box-shadow:none}}
.chr-app input[aria-invalid="true"].blink, .chr-app select[aria-invalid="true"].blink, .chr-app textarea[aria-invalid="true"].blink{animation:chr-blink-invalid 1s ease infinite}

/* ---------- trasmissione a CECCHINATO HR ---------- */
.chr-app .tx-choice{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:6px}
.chr-app .tx-opt{text-align:left; padding:16px 48px 16px 78px; border:2px solid var(--line); border-radius:14px; background:#fff; cursor:pointer; font:inherit; position:relative; transition:border-color .15s, background .15s, transform .15s}
.chr-app .tx-opt .tx-ico{position:absolute; left:16px; top:16px; width:46px; height:46px; border-radius:13px; background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s, transform .15s}
.chr-app .tx-opt .tx-ico svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.chr-app .tx-opt:hover .tx-ico{transform:scale(1.06)}
.chr-app .tx-opt[aria-checked="true"] .tx-ico{background:var(--brand); color:#fff; box-shadow:0 6px 16px rgba(40,70,125,.28)}
.chr-app .tx-opt::before{content:""; position:absolute; right:16px; top:18px; width:20px; height:20px; border-radius:50%; border:2px solid #c3ccd8; background:#fff}
.chr-app .tx-opt:hover{border-color:var(--brand); transform:translateY(-1px)}
.chr-app .tx-opt[aria-checked="true"]{border-color:var(--brand); background:var(--brand-soft)}
.chr-app .tx-opt[aria-checked="true"]::before{border-color:var(--brand); background:radial-gradient(circle,var(--brand) 0 5px,#fff 6px)}
.chr-app .tx-opt strong{display:block; font-size:15px; color:var(--ink)}
.chr-app .tx-opt span{display:block; font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.4}
.chr-app .tx-panel{margin-top:18px; padding-top:18px; border-top:1px dashed var(--line)}
.chr-app .tx-note{font-size:13.5px; line-height:1.55; color:#334155; background:var(--brand-soft); border-radius:12px; padding:12px 14px}
.chr-app .tx-note b{color:var(--brand)}
@media (max-width:640px){ .chr-app .tx-choice{grid-template-columns:1fr} }
.chr-app .send-docs{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px}
.chr-app .send-doc{position:relative; border:1px dashed var(--line); border-radius:12px; padding:12px 14px; background:#fbfcfe}
.chr-app .send-doc.has-file{border-style:solid; border-color:#b9e0d2; background:#f2faf7}
.chr-app .send-doc .send-doc-h{display:flex; justify-content:space-between; align-items:center; gap:8px; font-weight:600; font-size:14px}
.chr-app .send-doc .send-doc-h .btn.mini{padding:7px 12px; font-size:12px; margin:0}
.chr-app .send-doc input[type="file"]{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden}
.chr-app .send-doc ul{list-style:none; margin:8px 0 0; padding:0; font-size:12.5px; color:#334155}
.chr-app .send-doc li{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:4px 0; border-top:1px dotted var(--line)}
.chr-app .send-doc li button{background:none; border:0; color:var(--err); cursor:pointer; font-size:12px; font-weight:600; padding:2px 4px; font-family:inherit}
.chr-app .send-doc .send-doc-hint{font-size:11.5px; color:var(--muted); margin-top:6px}
.chr-app .send-meta{font-size:12.5px; color:var(--muted); margin-top:10px}
.chr-app .consent{display:flex; gap:10px; align-items:flex-start; margin-top:18px; padding:12px 14px; border-radius:12px; background:var(--brand-soft); font-size:13.5px; line-height:1.5; font-weight:500; color:var(--ink)}
.chr-app .consent input{margin-top:4px; width:18px; height:18px; flex:0 0 auto}
.chr-app .captcha{margin-top:18px; display:grid; grid-template-columns:auto 1fr; gap:14px 18px; align-items:center; max-width:560px}
.chr-app .captcha .cap-img{width:220px; height:70px; border-radius:10px; border:1px solid var(--line); background:#EEF3F8; display:flex; align-items:center; justify-content:center; overflow:hidden}
.chr-app .captcha .cap-img img{display:block; width:220px; height:70px}
.chr-app .captcha .cap-img .cap-q{font-weight:700; font-size:18px; color:var(--brand); padding:0 12px; text-align:center}
.chr-app .captcha .cap-links{grid-column:1 / -1; display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px}
.chr-app .captcha .cap-links button{background:none; border:0; padding:0; color:var(--brand); text-decoration:underline; cursor:pointer; font:inherit; font-size:12.5px}
.chr-app .captcha input{text-transform:uppercase; letter-spacing:.18em; font-weight:700; font-size:18px; max-width:220px}
.chr-app .send-bar{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:18px}
.chr-app .send-status{font-size:13.5px; margin-top:10px; display:none; padding:12px 14px; border-radius:12px}
.chr-app .send-status.ok{display:block; background:#EFF8F5; color:#0E7466; border:1px solid #b9e0d2}
.chr-app .send-status.err{display:block; background:#FBEDEC; color:#B3261E; border:1px solid #f0c4c0}
.chr-app .hp-field{position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; overflow:hidden}

@media (prefers-reduced-motion: reduce){
  .chr-app *{transition:none !important; animation:none !important}
  .chr-app input[aria-invalid="true"].blink, .chr-app select[aria-invalid="true"].blink, .chr-app textarea[aria-invalid="true"].blink{border-color:var(--err); box-shadow:0 0 0 3px rgba(239,68,68,.35)}
}