/* UI neutra da prodotto SaaS per le demo. Dati di esempio: nessun cliente reale. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#f6f7f9;--panel:#fff;--ink:#111827;--muted:#6b7280;--line:#e5e7eb;--brand:#2563eb;--ok:#16a34a;--warn:#d97706;--bad:#dc2626;--soft:#eff6ff}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5}
.app{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
aside{background:var(--panel);border-right:1px solid var(--line);padding:20px 16px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;margin-bottom:24px}
.logo i{width:28px;height:28px;border-radius:8px;background:var(--brand);display:inline-block}
aside nav a{display:block;padding:8px 10px;border-radius:8px;color:var(--muted);text-decoration:none;font-weight:500}
aside nav a.on{background:var(--soft);color:var(--brand)}
aside .grp{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:16px 10px 6px}
main{padding:24px 28px}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.top h1{font-size:20px;font-weight:700}
.top p{color:var(--muted);font-size:13px}
.badge{font-size:11px;font-weight:600;padding:4px 8px;border-radius:999px;background:#fef3c7;color:#92400e;letter-spacing:.04em}
.btn{background:var(--brand);color:#fff;border:0;border-radius:8px;padding:9px 14px;font-weight:600;font-size:13px}
.btn.o{background:#fff;color:var(--ink);border:1px solid var(--line)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.kpi span{font-size:12px;color:var(--muted)}
.kpi b{display:block;font-size:26px;font-weight:700;margin-top:4px}
.kpi small{color:var(--ok);font-weight:600}
.kpi small.d{color:var(--bad)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px}
.card h2{font-size:14px;font-weight:600;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.st{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ok{background:#dcfce7;color:#166534}.wa{background:#fef3c7;color:#92400e}.bd{background:#fee2e2;color:#991b1b}.nt{background:#e5e7eb;color:#374151}
.grid2{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.bars{display:flex;align-items:flex-end;gap:8px;height:140px;padding-top:8px}
.bars div{flex:1;background:var(--brand);border-radius:4px 4px 0 0;position:relative;opacity:.9}
.bars div::after{content:attr(data-l);position:absolute;top:100%;left:0;right:0;text-align:center;font-size:10px;color:var(--muted);margin-top:4px}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:12px}
.muted{color:var(--muted)}
.right{text-align:right}
.chat{display:grid;grid-template-columns:1fr 300px;gap:16px}
.msgs{display:grid;gap:12px}
.m{max-width:80%;padding:12px 14px;border-radius:12px;background:var(--soft)}
.m.u{background:var(--brand);color:#fff;justify-self:end}
.m cite{display:block;font-style:normal;font-size:11px;margin-top:8px;color:var(--muted)}
.m.u cite{color:#dbeafe}
.src{border:1px solid var(--line);border-radius:8px;padding:10px;margin-bottom:8px;font-size:12px}
.src b{display:block;font-size:12px}
.input{display:flex;gap:8px;margin-top:12px}
.input input{flex:1;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font:inherit}
.week{display:grid;grid-template-columns:60px repeat(5,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.week>div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:44px;padding:4px 6px;font-size:12px}
.week .h{background:#f9fafb;font-weight:600;text-align:center}
.week .t{color:var(--muted);font-size:11px;text-align:right;padding-right:8px}
.ev{border-radius:6px;padding:4px 6px;font-size:11px;font-weight:600;margin-bottom:3px}
.ev.a{background:#dbeafe;color:#1e40af}.ev.b{background:#dcfce7;color:#166534}.ev.c{background:#fef3c7;color:#92400e}
.doc{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.page{background:#fff;border:1px solid var(--line);border-radius:8px;padding:22px;font-family:Georgia,serif;font-size:12px;line-height:1.6;color:#374151;min-height:520px}
.page mark{background:#fde68a;padding:0 2px}
.field{display:grid;grid-template-columns:150px 1fr auto;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;align-items:center}
.field span:first-child{color:var(--muted)}
.field .conf{font-size:11px;font-weight:600;color:var(--ok)}
.field .conf.l{color:var(--warn)}
.wa{background:#efe7dd;border-radius:12px;padding:12px;display:grid;gap:8px;max-height:560px;overflow:hidden}
.wa .b{max-width:78%;padding:8px 11px;border-radius:10px;background:#fff;font-size:13px;box-shadow:0 1px 1px rgba(0,0,0,.08);position:relative}
.wa .b.me{background:#d9fdd3;justify-self:end}
.wa .b{color:var(--ink);font-weight:400}/* .wa è anche la pillola di stato ambra: senza questa riga il testo della chat ne ereditava il colore */
.wa .b time{display:block;font-size:10px;color:#8a8a8a;text-align:right;margin-top:3px}
.wa .day{justify-self:center;font-size:11px;color:#666;background:#fff;border-radius:8px;padding:3px 10px}
.wa .sys{justify-self:center;font-size:11px;color:#92400e;background:#fef3c7;border-radius:8px;padding:3px 10px}
.wahead{display:flex;align-items:center;gap:10px;background:#075e54;color:#fff;border-radius:12px 12px 0 0;padding:10px 14px;margin:-16px -16px 10px}
.wahead i{width:32px;height:32px;border-radius:50%;background:#25d366;display:inline-block}
.sheet{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.sheet table{font-family:ui-monospace,Menlo,monospace;font-size:12px}
.sheet th{background:#f3f4f6;font-family:Inter,system-ui,sans-serif}
.sheet td.new{background:#dcfce7}
.tiles6{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ph{aspect-ratio:4/3;border-radius:8px;position:relative;overflow:hidden;background:linear-gradient(135deg,#c9b69a,#8c7a5c)}
.ph.k{background:linear-gradient(135deg,#d7d2c8,#9a948a)}.ph.b{background:linear-gradient(135deg,#b8c4cf,#6f7d8a)}.ph.l{background:linear-gradient(135deg,#e2d6c2,#a89a80)}
.ph::before{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.35))}
.ph span{position:absolute;left:8px;bottom:6px;color:#fff;font-size:11px;font-weight:600}
.ph b{position:absolute;right:8px;top:6px;font-size:10px;font-weight:700;padding:2px 6px;border-radius:999px;background:#fff;color:var(--ink)}
.ph b.after{background:#16a34a;color:#fff}
.ph.dim{filter:brightness(.72) saturate(.6)}
.post{border:1px solid var(--line);border-radius:10px;padding:10px;font-size:12px;display:grid;gap:6px}
.post .img{aspect-ratio:1;border-radius:8px;background:linear-gradient(135deg,#c9b69a,#8c7a5c)}
.post .img.b{background:linear-gradient(135deg,#b8c4cf,#6f7d8a)}.post .img.r{background:linear-gradient(135deg,#f3d1c9,#c97b6a)}
.post .meta{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.lead{border:1px solid var(--line);border-radius:10px;padding:12px;font-size:13px;display:grid;gap:6px}
.lead b{font-size:14px}
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;background:#eff6ff;color:#1e40af;font-weight:600;margin-right:4px}

/* ── telefono: le demo sono gestionali da scrivania; qui la barra laterale diventa una riga, le griglie vanno in colonna
      e tabelle, agende e bacheche scorrono in orizzontale dentro il loro riquadro. Il prefisso `main` serve a vincere
      sugli <style> delle singole pagine, che vengono dopo questo foglio. ── */
@media(max-width:760px){
body{font-size:14px}
.app{display:block;min-height:0}
aside{display:flex;align-items:center;gap:14px;padding:10px 16px;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto}
aside .logo{margin:0;white-space:nowrap}
aside nav{display:flex;gap:4px}
aside nav a{white-space:nowrap}
aside .grp{display:none}
main{padding:16px;overflow-x:hidden}
.top{flex-direction:column;align-items:flex-start;gap:10px}
.kpis{grid-template-columns:1fr 1fr;gap:10px}
.kpi b{font-size:22px}
main .grid2,main .chat,main .doc,main .phases,main .bozza-grid,main .score-area,main .confronto,main .today-grid,main .msg,main .comparison,main .assumptions,main .scenario-grid,main .compare-grid,main .riass{grid-template-columns:minmax(0,1fr)}
main [style*="repeat(5"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
main .tiles6{grid-template-columns:1fr 1fr}
.card{overflow-x:auto}
.card table{min-width:540px}
.sheet{overflow-x:auto}
main .week{grid-template-columns:44px repeat(5,minmax(104px,1fr));overflow-x:auto}
main .board{grid-template-columns:repeat(4,minmax(230px,1fr));overflow-x:auto}
main .phones{grid-template-columns:repeat(3,minmax(210px,1fr));overflow-x:auto}
main .field{grid-template-columns:110px 1fr auto}
main .day-cell{height:46px;font-size:11px}
main .legend{flex-wrap:wrap;gap:6px 12px}
main .conto-row{grid-template-columns:1fr 92px;gap:10px}
.page{min-height:0}
.m{max-width:92%}
/* etichette piccole: su telefono mai sotto i 12px (le mini-schermate dentro i telefoni disegnati restano in scala) */
main .kpi small,main .badge,main th,main .lead small,main .lead span,main .wa time,main .day-cell span,main .tag,main cite,main .conf{font-size:12px}
}