/* CuraInTempo — design system condiviso per il flusso app/ (estratto da /index.html) */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:#fff;color:#1a1a1a;line-height:1.6}

a{color:#0a7acc}

/* ── Header / nav (coerente con index.html) ───────────────── */
.app-header{background:#0a2540;padding:18px 24px;display:flex;align-items:center;justify-content:space-between}
.app-logo{font-family:'Sora',sans-serif;font-weight:800;font-size:20px;color:#fff;text-decoration:none;letter-spacing:-0.02em}
.app-logo span{color:#4db8ff}
.app-header-right{display:flex;align-items:center;gap:16px}
.app-header-right a{color:rgba(255,255,255,0.65);text-decoration:none;font-size:13px;font-weight:500}
.app-header-right a:hover{color:#fff}

/* ── Progress stepper ───────────────────────────────────────── */
.progress-bar{display:flex;justify-content:center;gap:6px;padding:20px 16px;background:#f7faff;border-bottom:1px solid #e5eef7;flex-wrap:wrap}
.progress-step{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#9ab3c9}
.progress-step .dot{width:22px;height:22px;border-radius:50%;background:#d0dce8;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.progress-step.active{color:#0a2540}
.progress-step.active .dot{background:#4db8ff;color:#0a2540}
.progress-step.done .dot{background:#0a7acc;color:#fff}
.progress-step.done{color:#0a7acc}
.progress-sep{width:20px;height:1px;background:#d0dce8;align-self:center}

/* ── Layout ─────────────────────────────────────────────────── */
.app-main{max-width:640px;margin:0 auto;padding:40px 20px 80px}
.app-main.wide{max-width:1080px}
.page-title{font-family:'Sora',sans-serif;font-size:clamp(22px,4vw,30px);font-weight:700;color:#0a2540;margin-bottom:8px}
.page-lead{font-size:15px;color:#5a6b7a;margin-bottom:32px;line-height:1.7}

/* ── Cards ──────────────────────────────────────────────────── */
.card{background:#fff;border:1px solid #d0dce8;border-radius:8px;padding:28px;margin-bottom:20px}
.card + .card{margin-top:0}

/* ── Forms ──────────────────────────────────────────────────── */
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:600;color:#0a2540;margin-bottom:6px}
.field .hint{font-size:12px;color:#8a99a8;margin-top:5px}
.field input[type=text],
.field input[type=email],
.field input[type=date],
.field input[type=tel],
.field input[type=number],
.field select,
.field textarea{
  width:100%;padding:12px 14px;border:1.5px solid #d0dce8;border-radius:8px;
  font-size:15px;font-family:'Inter',sans-serif;outline:none;transition:border-color .2s;background:#fff;color:#1a1a1a
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#4db8ff}
.field input.error,.field select.error{border-color:#d9534f}
.field-error{font-size:12px;color:#d9534f;margin-top:5px;display:none}
.field-error.show{display:block}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.field-row{grid-template-columns:1fr}}

.checkbox-row{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:#333}
.checkbox-row input{margin-top:3px;width:16px;height:16px;flex-shrink:0}

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary{background:#4db8ff;color:#0a2540;font-family:'Inter',sans-serif;font-size:16px;font-weight:700;padding:16px 36px;border-radius:8px;border:3px solid #4db8ff;cursor:pointer;transition:background .2s,border-color .2s,opacity .2s}
.btn-primary:hover:not(:disabled){background:#7acfff;border-color:#7acfff}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.btn-secondary{background:#fff;color:#0a2540;font-family:'Inter',sans-serif;font-size:15px;font-weight:600;padding:14px 28px;border-radius:8px;border:1.5px solid #d0dce8;cursor:pointer;transition:border-color .2s,background .2s}
.btn-secondary:hover:not(:disabled){border-color:#4db8ff;background:#f0f9ff}
.btn-secondary:disabled{opacity:.5;cursor:not-allowed}
.btn-block{width:100%;display:block;text-align:center}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

/* ── Banners / alerts ───────────────────────────────────────── */
.banner{border-radius:8px;padding:16px 18px;font-size:14px;line-height:1.6;margin-bottom:20px;display:flex;gap:10px;align-items:flex-start}
.banner-warning{background:#fff8e1;border:1px solid #ffe08a;color:#7a5c00}
.banner-info{background:#e8f4ff;border:1px solid #b8ddff;color:#0a4d80}
.banner-danger{background:#fdeceb;border:1px solid #f3b7b2;color:#8a1f16}
.banner-success{background:#e9f9ef;border:1px solid #a9e6c0;color:#14602f}
.banner b{font-weight:700}

/* ── Disclaimer ─────────────────────────────────────────────── */
.disclaimer-box{background:#f7f7f7;border:1px solid #e0e0e0;border-radius:8px;padding:16px 20px;font-size:13px;color:#666;line-height:1.6;margin:20px 0}
.disclaimer-box strong{color:#444}

/* ── Spinner ────────────────────────────────────────────────── */
.spinner{width:20px;height:20px;border:3px solid rgba(10,37,64,0.15);border-top-color:#0a2540;border-radius:50%;animation:spin .8s linear infinite;display:inline-block;vertical-align:middle}
.spinner-light{border-color:rgba(255,255,255,0.3);border-top-color:#fff}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-row{display:flex;align-items:center;gap:10px;font-size:14px;color:#5a6b7a;padding:16px 0}

/* ── Dropzone ───────────────────────────────────────────────── */
.dropzone{border:2px dashed #d0dce8;border-radius:8px;padding:40px 20px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;background:#f9fbfd}
.dropzone:hover,.dropzone.dragover{border-color:#4db8ff;background:#f0f9ff}
.dropzone i{font-size:32px;color:#0a7acc;margin-bottom:10px;display:block}
.dropzone .dz-title{font-size:15px;font-weight:600;color:#0a2540;margin-bottom:4px}
.dropzone .dz-sub{font-size:13px;color:#8a99a8}
.dz-preview{margin-top:16px;text-align:center}
.dz-preview img{max-width:100%;max-height:280px;border-radius:8px;border:1px solid #d0dce8}
.dz-preview .filename{font-size:13px;color:#5a6b7a;margin-top:8px}

/* ── Badges/tags ────────────────────────────────────────────── */
.badge-optional{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#e8f4ff;color:#0a7acc;padding:3px 9px;border-radius:20px}
.badge-required{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#fff3cd;color:#856404;padding:3px 9px;border-radius:20px}

/* ── Autocomplete ───────────────────────────────────────────── */
.autocomplete{position:relative}
.autocomplete-list{position:absolute;top:100%;left:0;right:0;background:#fff;border:1.5px solid #d0dce8;border-top:none;border-radius:0 0 8px 8px;max-height:280px;overflow-y:auto;z-index:20;display:none;box-shadow:0 8px 20px rgba(10,37,64,0.08)}
.autocomplete-list.show{display:block}
.autocomplete-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid #f0f4f8}
.autocomplete-item:last-child{border-bottom:none}
.autocomplete-item:hover,.autocomplete-item.active{background:#f0f9ff}
.autocomplete-item .name{font-size:14px;font-weight:600;color:#0a2540}
.autocomplete-item .meta{font-size:12px;color:#8a99a8;margin-top:2px}

/* ── KPI / stats (dashboard) ────────────────────────────────── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:32px}
.kpi-card{background:#0a2540;border-radius:8px;padding:20px;color:#fff}
.kpi-card .num{font-family:'Sora',sans-serif;font-size:32px;font-weight:800;color:#4db8ff;line-height:1}
.kpi-card .label{font-size:12px;color:rgba(255,255,255,0.65);margin-top:6px}

/* ── Bars (region chart) ────────────────────────────────────── */
.bar-row{display:grid;grid-template-columns:120px 1fr 50px;align-items:center;gap:10px;margin-bottom:10px;font-size:13px}
.bar-row .region-name{font-weight:600;color:#0a2540;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{background:#eef4fa;border-radius:6px;height:16px;overflow:hidden}
.bar-fill{background:linear-gradient(90deg,#4db8ff,#0a7acc);height:100%;border-radius:6px;transition:width .4s ease}
.bar-row .pct{text-align:right;color:#5a6b7a;font-weight:600}

/* ── Table ──────────────────────────────────────────────────── */
.data-table{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff;border:1px solid #e5eef7;border-radius:8px;overflow:hidden}
.data-table th,.data-table td{padding:10px 14px;text-align:left;border-bottom:1px solid #eef4fa}
.data-table th{background:#f7faff;color:#0a2540;font-weight:600;cursor:pointer;user-select:none;white-space:nowrap}
.data-table th:hover{background:#eef4fa}
.data-table tbody tr:hover{background:#fafcff}
.data-table tbody tr:last-child td{border-bottom:none}

/* ── Feed ───────────────────────────────────────────────────── */
.feed-item{display:flex;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid #eef4fa;font-size:13.5px}
.feed-item:last-child{border-bottom:none}
.feed-item .feed-main{color:#0a2540;font-weight:600}
.feed-item .feed-sub{color:#8a99a8;font-size:12.5px;margin-top:3px}
.feed-item .feed-status{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;height:fit-content}
.status-accettata{background:#e9f9ef;color:#14602f}
.status-in_corso{background:#e8f4ff;color:#0a4d80}
.status-ignorata{background:#fdeceb;color:#8a1f16}

/* ── Timeline (tracking) ────────────────────────────────────── */
.timeline{display:flex;flex-direction:column;gap:0;margin:24px 0}
.timeline-item{display:flex;gap:16px;position:relative}
.timeline-item .tl-dot-wrap{display:flex;flex-direction:column;align-items:center}
.timeline-item .tl-dot{width:26px;height:26px;border-radius:50%;background:#d0dce8;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.timeline-item .tl-line{width:2px;flex:1;background:#d0dce8;min-height:24px}
.timeline-item:last-child .tl-line{display:none}
.timeline-item.done .tl-dot{background:#0a7acc}
.timeline-item.active .tl-dot{background:#4db8ff;color:#0a2540;box-shadow:0 0 0 4px rgba(77,184,255,0.25)}
.timeline-item.done .tl-line{background:#0a7acc}
.timeline-content{padding-bottom:26px}
.timeline-content h4{font-size:14.5px;font-weight:600;color:#0a2540;margin-bottom:3px}
.timeline-content p{font-size:13px;color:#8a99a8}
.timeline-item.active .timeline-content h4{color:#0a2540}
.timeline-item:not(.done):not(.active) .timeline-content h4{color:#a9b8c6}

/* ── Signature canvas ───────────────────────────────────────── */
#signature-pad{border:1.5px solid #d0dce8;border-radius:8px;background:#fff;touch-action:none;width:100%;max-width:100%;display:block;cursor:crosshair}

/* ── Misc ───────────────────────────────────────────────────── */
.center{text-align:center}
.muted{color:#8a99a8}
.small{font-size:13px}
.section-label{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#0a7acc;margin-bottom:10px}
.divider{height:1px;background:#eef4fa;margin:28px 0}
.summary-list{list-style:none;font-size:14px}
.summary-list li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #eef4fa}
.summary-list li:last-child{border-bottom:none}
.summary-list li span:first-child{color:#8a99a8}
.summary-list li span:last-child{color:#0a2540;font-weight:600;text-align:right}

.otp-input{letter-spacing:.6em;text-align:center;font-size:22px !important;font-weight:700}

.filter-bar{display:flex;gap:12px;align-items:center;margin-bottom:20px;flex-wrap:wrap}
.filter-bar select{padding:10px 14px;border:1.5px solid #d0dce8;border-radius:8px;font-family:'Inter',sans-serif;font-size:14px;background:#fff}

footer.app-footer{background:#0a2540;color:rgba(255,255,255,0.45);text-align:center;padding:28px 24px;font-size:12.5px;margin-top:40px}

@media(max-width:600px){
  .app-header{padding:14px 16px}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .bar-row{grid-template-columns:80px 1fr 40px}
}