:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; color: #17212b; background: #f4f7f8; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button { cursor: pointer; border: 0; } button:disabled { opacity:.45; cursor:not-allowed; }
.shell { max-width: 1180px; margin: auto; min-height: 100vh; padding: 24px; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.brand { display:flex; align-items:center; min-width:152px; }.brand-button { background:transparent; padding:0; color:inherit; }.brand img { display:block; width:170px; height:68px; object-fit:contain; object-position:left center; }
.view-actions { display:flex; gap:8px; align-items:center; }
.mark { width: 34px; height: 34px; border-radius: 11px; display:grid; place-items:center; background:#0c6e69; color:#fff; }
.role { background: #e6efef; color:#0c6e69; border-radius: 999px; padding: 8px 12px; font-size:.8rem; font-weight:700; }
.utility-menu { position:relative; }
.utility-menu summary { list-style:none; background:#e6efef; color:#0c6e69; border-radius:999px; padding:8px 12px; font-size:.8rem; font-weight:700; cursor:pointer; }
.utility-menu summary::-webkit-details-marker { display:none; }
.utility-menu-panel { position:absolute; z-index:20; right:0; top:calc(100% + 8px); width:210px; padding:6px; border:1px solid #dce7e6; background:#fff; border-radius:12px; box-shadow:0 12px 28px #143b4326; }
.utility-menu-panel button { display:block; width:100%; padding:11px 10px; border-radius:8px; background:transparent; color:#26363c; text-align:left; font-size:.84rem; font-weight:700; }
.utility-menu-panel button:hover { background:#edf7f4; }
.demo-banner { margin:-10px 0 18px; color:#174a4c; background:#e9f5f2; border:1px solid #cce6dc; border-radius:10px; padding:9px 12px; font-size:.72rem; font-weight:800; letter-spacing:.04em; }
.hero { background: #113b43; color:#fff; border-radius: 24px; padding: 30px; display:flex; justify-content:space-between; align-items:end; gap:24px; }
h1 { margin: 8px 0; font-size: clamp(2rem, 5vw, 3.6rem); letter-spacing:-.06em; max-width: 650px; line-height: 1; }
.muted { color:#71808a; } .hero .muted { color:#c5d9d9; max-width:580px; }
.eyebrow { text-transform:uppercase; letter-spacing:.13em; font-size:.72rem; font-weight:800; color:#70d0bd; }
.primary { background:#f3c969; color:#1e2d2f; border-radius: 12px; padding:14px 18px; font-weight:800; white-space:nowrap; }
.secondary { background:#e9f0f0; color:#174a4c; border-radius:12px; padding:12px 16px; font-weight:750; }
.content { margin-top:24px; display:grid; grid-template-columns: 1.5fr 1fr; gap:24px; }
.technician-content { grid-template-columns:minmax(0, 760px); }
.panel, .card { background:#fff; border:1px solid #e2e9e9; border-radius:18px; padding:22px; box-shadow: 0 8px 24px #143b4310; }
.panel h2 { margin:0 0 18px; font-size:1.05rem; }
.panel-title { display:flex; align-items:start; justify-content:space-between; gap:12px; }.panel-title h2 { margin-bottom:18px; }.sync-state { color:#8a6915; background:#fff5d8; border-radius:999px; padding:5px 8px; white-space:nowrap; font-size:.7rem; font-weight:800; }.sync-state.online { color:#08754c; background:#e6f5ee; }
.job { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0; border-top:1px solid #edf1f1; }.job-button { width:100%; text-align:left; background:transparent; color:inherit; }.job-button:hover { background:#f7faf9; }
.job:first-of-type { border-top:0; }
.job-title { font-weight:800; margin-bottom:5px; }.job-meta { font-size:.82rem; color:#76858c; }
.status { border-radius:999px; padding:6px 9px; font-size:.72rem; font-weight:800; background:#e6f5ee; color:#08754c; }
.status.progress { background:#fff4d8; color:#9b6b00; }
.metric-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pilot-metrics { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:20px; }
.metric { padding:16px; background:#f5f8f8; border-radius:14px; }.metric strong { display:block; font-size:1.65rem; }.metric span { color:#71808a; font-size:.78rem; }
.modal-backdrop { position:fixed; inset:0; background:#0e252a99; display:grid; place-items:center; padding:18px; }
.modal { background:#fff; width:min(620px,100%); max-height:92vh; overflow:auto; border-radius:22px; padding:24px; }
.modal-header { display:flex; justify-content:space-between; align-items:start; gap:12px; }.close { background:transparent; font-size:1.5rem; color:#71808a; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0; }.field { display:flex; flex-direction:column; gap:7px; }.field.full { grid-column:1/-1; }.field label { font-size:.78rem; font-weight:800; color:#50616a; }.field input, .field select { border:1px solid #d8e2e2; border-radius:10px; padding:12px; background:#fbfdfd; }.field textarea { border:1px solid #d8e2e2; border-radius:10px; padding:12px; background:#fbfdfd; resize:vertical; font:inherit; line-height:1.45; }.admin-grid { display:grid; grid-template-columns:1fr 1.25fr; gap:20px; align-items:start; }.version-list { display:grid; gap:0; }.version-list > div { display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding:13px 0; border-top:1px solid #eaf0ef; }.version-list > div:first-child { border-top:0; }.version-list span { color:#6d7d83; font-size:.82rem; }.version-list small { grid-column:2; grid-row:1; color:#789095; font-size:.72rem; }.version-list .active-label { color:#08754c; font-weight:800; }.admin-textarea { margin:16px 0; }.admin-message { margin:12px 0; color:#08754c; font-size:.84rem; font-weight:750; }
.dictation-hint { color:#557077; font-size:.76rem; line-height:1.35; }
.dictation-button { align-self:flex-start; background:#e9f5f2; color:#174a4c; border:1px solid #b9ddd1; border-radius:10px; padding:10px 12px; font-size:0; font-weight:800; }
.dictation-button::after { content:'🎙 Microfono – detta'; font-size:.84rem; }
.checklist { display:grid; gap:10px; margin:16px 0 20px; }.check { display:flex; align-items:center; gap:12px; padding:13px; border:1px solid #e0e9e8; border-radius:12px; }.check.done { background:#f0faf6; border-color:#b5e0ce; }.check input { width:19px; height:19px; accent-color:#0c6e69; }.check small { display:block; color:#71808a; margin-top:3px; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; }
.offline-note { margin:12px 0 20px; padding:12px; border-radius:10px; color:#0c6e69; background:#e9f5f2; font-size:.83rem; line-height:1.4; }
.insurance-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin:10px 0 24px; }.insurance-heading h1 { font-size:clamp(2rem,5vw,3.5rem); max-width:700px; }.claim-status { color:#08754c; background:#e6f5ee; border-radius:999px; padding:8px 11px; font-size:.78rem; font-weight:800; white-space:nowrap; }.supervisor-summary { margin:-8px 0 20px; }.supervisor-summary summary, .integrity-details summary, .audit-details summary { cursor:pointer; color:#174a4c; font-size:.84rem; font-weight:800; }.supervisor-summary summary { display:inline-block; padding:8px 0; }.supervisor-summary .pilot-metrics { margin:8px 0 0; }.search-box { background:#fff; border:1px solid #dfe8e7; border-radius:16px; display:flex; align-items:center; padding:7px 8px 7px 16px; gap:10px; margin-bottom:20px; }.search-box span { font-size:1.35rem; color:#60757a; }.search-box input { flex:1; border:0; outline:0; min-width:0; padding:11px 0; }.insurance-grid { display:grid; grid-template-columns:300px 1fr; gap:20px; align-items:start; }.job-list { padding:12px; max-height:700px; overflow:auto; }.job-list h2 { padding:8px 10px; }.insurance-job { width:100%; display:grid; gap:5px; text-align:left; padding:13px 11px; border-radius:12px; color:#26363c; background:transparent; }.insurance-job:hover, .insurance-job.selected { background:#edf7f4; }.insurance-job strong { color:#0c6e69; font-size:.82rem; }.insurance-job span { font-weight:800; font-size:.86rem; }.insurance-job small { color:#71808a; font-size:.75rem; }.evidence-detail { min-height:480px; }.detail-head { display:flex; justify-content:space-between; gap:15px; align-items:start; }.detail-head h2 { font-size:1.5rem; margin:6px 0; }.integrity-details { margin:18px 0; border-radius:10px; color:#08754c; background:#e7f6ee; font-size:.83rem; font-weight:750; padding:11px 12px; }.integrity-details p { margin:9px 0 0; color:#296046; font-weight:500; line-height:1.4; }.evidence-detail h3 { font-size:.96rem; margin:23px 0 10px; }.pairs { display:grid; gap:12px; }.pair { border:1px solid #e2e9e8; border-radius:13px; padding:12px; }.pair h4 { text-transform:capitalize; margin:0 0 9px; font-size:.84rem; }.pair-images { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.pair-images img, .no-photo { width:100%; height:135px; object-fit:cover; border-radius:9px; background:#eff3f2; }.no-photo { display:grid; place-items:center; color:#77878d; font-size:.75rem; text-align:center; padding:10px; }.pair-images small { display:block; margin:5px 1px 0; font-size:.67rem; color:#64767c; font-weight:750; }.audit-details { margin-top:20px; }.audit-details summary { padding:11px 0; }.audit-list { margin-top:4px; display:grid; gap:0; border:1px solid #e2e9e8; border-radius:12px; overflow:hidden; }.audit-list div { display:flex; justify-content:space-between; gap:12px; padding:11px 12px; border-top:1px solid #eaf0ef; font-size:.78rem; }.audit-list div:first-child { border-top:0; }.audit-list span { color:#71808a; }.empty-detail { min-height:390px; display:grid; align-content:center; justify-items:center; text-align:center; color:#71808a; }.empty-detail span { color:#0c6e69; font-size:2.5rem; }.empty-detail h2 { color:#2b3a40; margin:12px 0 4px; }.empty-state { color:#71808a; padding:12px; font-size:.86rem; }
.capture-shell { max-width:680px; min-height:100vh; margin:auto; padding:20px; }.capture-shell .topbar { margin-bottom:28px; }.capture-progress { display:flex; justify-content:space-between; align-items:end; }.capture-progress h2 { margin:5px 0 0; font-size:1rem; }.capture-progress > strong { font-size:1.4rem; }.progress-track { height:8px; background:#e1e9e8; border-radius:10px; overflow:hidden; margin:14px 0 20px; }.progress-track span { display:block; height:100%; background:#0c6e69; border-radius:inherit; transition:width .2s; }.capture-card { border-radius:24px; background:#fff; border:1px solid #e0e8e7; padding:24px; box-shadow:0 10px 28px #143b4312; }.capture-step { color:#0c6e69; font-weight:800; font-size:.9rem; }.capture-step span { color:#87959b; }.capture-card h1 { font-size:clamp(2rem,7vw,3rem); margin:10px 0; }.capture-card p { color:#617078; margin:0 0 18px; }.camera-area { min-height:260px; border:2px dashed #b4c7c5; background:#f4f8f7; border-radius:18px; overflow:hidden; position:relative; display:grid; place-items:center; }.camera-area.has-photo { border-style:solid; border-color:#8ac8b4; }.camera-area img { width:100%; height:300px; object-fit:cover; display:block; }.camera-empty { text-align:center; color:#52636a; display:grid; gap:8px; }.camera-empty span { font-size:3rem; color:#0c6e69; }.camera-empty small { color:#77878d; }.photo-watermark-note { margin:10px 0 0; color:#617078; font-size:.82rem; line-height:1.35; }.capture-badge { position:absolute; left:12px; bottom:12px; border-radius:999px; padding:8px 10px; background:#0c6e69; color:white; font-size:.78rem; font-weight:800; }.capture-actions { display:grid; grid-template-columns:1fr 2fr; gap:10px; margin-top:16px; }.camera-button { font-size:1.05rem; }.quality-note { font-size:.8rem; color:#08754c; margin-top:14px; }.reference { position:relative; border-radius:12px; overflow:hidden; height:112px; margin-bottom:14px; }.reference img { width:100%; height:100%; object-fit:cover; filter:brightness(.75); }.reference span { position:absolute; inset:auto 10px 10px; color:#fff; font-size:.75rem; font-weight:800; }.capture-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:18px 0; }.text-button { background:transparent; color:#41636a; font-weight:750; padding:12px 0; }
@media (max-width:760px) { .shell { padding:16px; }.hero { display:block; padding:24px; }.hero .primary { margin-top:20px; width:100%; }.content { grid-template-columns:1fr; }.form-grid { grid-template-columns:1fr; }.field.full { grid-column:auto; }.topbar { margin-bottom:18px; }.brand img { width:142px; height:57px; }.view-actions { gap:4px; }.role { padding:7px 8px; }.capture-shell { padding:16px; }.capture-card { padding:18px; }.capture-footer .primary { padding:12px; }.insurance-heading { display:block; }.claim-status { display:inline-block; margin-top:12px; }.search-box { flex-wrap:wrap; }.search-box input { min-width:200px; }.pilot-metrics { grid-template-columns:1fr 1fr; }.insurance-grid, .admin-grid { grid-template-columns:1fr; }.job-list { max-height:250px; }.detail-head { display:block; }.detail-head .primary { margin-top:12px; } }
@media print { .topbar, .insurance-heading, .search-box, .job-list, #print-package { display:none !important; }.shell { max-width:none; padding:0; }.insurance-grid { display:block; }.evidence-detail { box-shadow:none; border:0; }.pair { break-inside:avoid; }.pair-images img { height:180px; } }
.progress-track.progress-0 span { width: 0; }
.progress-track.progress-1 span { width: 16.6667%; }
.progress-track.progress-2 span { width: 33.3333%; }
.progress-track.progress-3 span { width: 50%; }
.progress-track.progress-4 span { width: 66.6667%; }
.progress-track.progress-5 span { width: 83.3333%; }
.progress-track.progress-6 span { width: 100%; }
.zoomable-photo { cursor: zoom-in; }
.photo-hint { margin: 0 0 12px; font-size: .9rem; }
.lightbox { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(5,18,22,.92); }
.lightbox img { max-width:95vw; max-height:90vh; object-fit:contain; border-radius:12px; box-shadow:0 12px 45px rgba(0,0,0,.45); }
.lightbox-close { position:absolute; top:16px; right:20px; border:0; background:rgba(255,255,255,.15); color:#fff; font-size:2rem; width:44px; height:44px; border-radius:50%; cursor:pointer; }

/* Trako1 brand palette: deep blue from the wordmark, orange from the pin. */
:root { --trako-navy:#26374a; --trako-navy-dark:#1a2838; --trako-orange:#f36a18; --trako-orange-dark:#c94d08; --trako-sand:#fff4ec; --trako-mist:#f4f6f8; --trako-line:#dce3e9; background:var(--trako-mist); color:var(--trako-navy-dark); }
body { background:var(--trako-mist); }
.hero { background:linear-gradient(135deg, var(--trako-navy-dark), var(--trako-navy)); box-shadow:0 12px 30px #18283b24; }
.brand-tagline { color:#fff; font-size:clamp(1.05rem, 2.6vw, 1.55rem); font-weight:900; letter-spacing:.015em; margin-bottom:12px; text-transform:uppercase; }.brand-tagline span { color:var(--trako-orange); }
.hero .eyebrow, .eyebrow { color:var(--trako-orange); }
.primary { background:var(--trako-orange); color:#fff; box-shadow:0 5px 12px #c94d082b; }
.primary:hover { background:var(--trako-orange-dark); }
.secondary { background:var(--trako-sand); color:var(--trako-navy); }
.role, .utility-menu summary { background:var(--trako-sand); color:var(--trako-navy); }
.utility-menu-panel { border-color:var(--trako-line); box-shadow:0 12px 28px #18283b26; }
.utility-menu-panel button:hover, .job-button:hover, .insurance-job:hover, .insurance-job.selected { background:var(--trako-sand); }
.panel, .card, .capture-card, .search-box { border-color:var(--trako-line); box-shadow:0 8px 24px #18283b10; }
.sync-state { color:var(--trako-orange-dark); background:var(--trako-sand); }
.sync-state.online, .status { color:#08754c; background:#e6f5ee; }
.status.progress { color:var(--trako-orange-dark); background:var(--trako-sand); }
.offline-note, .demo-banner { color:var(--trako-navy); background:var(--trako-sand); border-color:#f6c39f; }
.field input, .field select, .field textarea { border-color:var(--trako-line); background:#fff; }
.dictation-button { color:var(--trako-navy); background:var(--trako-sand); border-color:#f6c39f; }
.capture-step, .camera-empty span, .insurance-job strong { color:var(--trako-orange); }
.progress-track span, .capture-badge { background:var(--trako-orange); }
.camera-area { border-color:#b7c5d2; background:#f7f9fb; }
.camera-area.has-photo { border-color:#f6a36e; }
.check input { accent-color:var(--trako-orange); }
.integrity-details { color:#08754c; }
.supervisor-summary summary, .integrity-details summary, .audit-details summary { color:var(--trako-navy); }
.pair, .audit-list { border-color:var(--trako-line); }
.pair-images img, .no-photo { background:#edf1f5; }
@media (max-width:760px) { .primary { box-shadow:none; } }