/* Demo del Cruscotto sul telefono: stile chiaro, come il Cruscotto vero, dentro l'app scura */
#demo { position: fixed; inset: 0; z-index: 8; background: #F3F6FA; color: #0C2340; display: flex; flex-direction: column; font-size: 15px; }
#demo[hidden] { display: none; }
#demo .dtop { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 12px 14px; background: #0C2340; color: #fff; }
#demo .dtop b { text-align: center; font-size: 16px; }
#demo .dtop .dclose { justify-self: end; background: transparent; border: 0; color: #fff; font-size: 20px; padding: 4px 8px; }
#demo .dback { justify-self: start; background: transparent; border: 0; color: #9BC9F5; font: inherit; font-weight: 600; padding: 4px 0; }
#demo .dpath { padding: 8px 14px; font-size: 12px; color: #5D6D7E; background: #fff; border-bottom: 1px solid #E1E8F0; display: flex; gap: 8px; align-items: center; }
#demo .dpath > :first-child { flex: 1; min-width: 0; }
#demo .dfake { white-space: nowrap; margin-left: auto; background: #FFF1CC; color: #7A5100; border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
#demo .dbody { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; -webkit-overflow-scrolling: touch; }
#demo .dkick { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #1F4E8C; font-weight: 700; }
#demo .dmuted { color: #5D6D7E; font-size: 13px; margin: 6px 0 0; }
#demo .dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#demo .dsez { text-align: left; background: #1F4E8C; color: #fff; border: 0; border-radius: 12px; padding: 12px; font: inherit; display: flex; flex-direction: column; gap: 4px; min-height: 76px; }
#demo .dsez small { font-size: 12px; opacity: .85; line-height: 1.3; }
#demo .dsez.locked { background: #DCE4EE; color: #5D6D7E; }
#demo .dsez.muted { background: #E9EEF4; color: #5D6D7E; }
#demo .dchips { display: flex; gap: 8px; flex-wrap: wrap; }
#demo .dchip { padding: 8px 12px; border-radius: 999px; border: 1px solid #C9D4E0; background: #fff; color: #0C2340; font: inherit; font-size: 13px; }
#demo .dchip.on { background: #0C2340; color: #fff; border-color: #0C2340; font-weight: 600; }
#demo .dkpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#demo .dkpis.four { grid-template-columns: repeat(2, 1fr); }
#demo .dkpis.five { grid-template-columns: repeat(3, 1fr); }
#demo .dkpi { background: #fff; border: 1px solid #E1E8F0; border-radius: 12px; padding: 10px 8px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
#demo .dkpi b { font-size: 22px; color: #1F4E8C; }
#demo .dkpi.red b { color: #C8102E; }
#demo .dkpi small { font-size: 11px; color: #5D6D7E; line-height: 1.25; }
#demo .dbox { background: #fff; border: 1px solid #E1E8F0; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
#demo .dbox.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#demo .dbox.warnbox { background: #FFF4E5; border-color: #FFD9A8; color: #7A4A00; }
#demo .dh { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: #0C2340; flex-wrap: wrap; }
#demo .dfunz { margin-left: auto; display: flex; gap: 4px; }
#demo .dfunz button { border: 1px solid #C9D4E0; background: #F7F9FC; color: #1F4E8C; border-radius: 8px; padding: 4px 7px; font: inherit; font-size: 11px; font-weight: 600; }
#demo .dtab { width: 100%; border-collapse: collapse; font-size: 13px; }
#demo .dtab th { text-align: left; background: linear-gradient(90deg, #1F4E8C, #C8102E); color: #fff; padding: 8px; font-size: 12px; }
#demo .dtab td { padding: 8px; border-bottom: 1px solid #E1E8F0; vertical-align: top; }
#demo .dtab small { color: #5D6D7E; font-size: 11px; }
#demo .dpill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
#demo .dpill.ok { background: #E3F6E8; color: #1B7F3B; } #demo .dpill.warn { background: #FFF1CC; color: #7A5100; } #demo .dpill.bad { background: #FDE2E4; color: #B3001B; }
#demo .dbars { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding-top: 6px; }
#demo .dbars div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; }
#demo .dbars i { display: block; width: 100%; background: linear-gradient(180deg, #1F4E8C, #0C2340); border-radius: 4px 4px 0 0; min-height: 2px; }
#demo .dbars small { font-size: 9px; color: #5D6D7E; }
#demo .drow { display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: 8px; font-size: 13px; }
#demo .drow i { display: block; height: 10px; background: linear-gradient(90deg, #1B7F3B, #8BD17C); border-radius: 999px; }
#demo .ddonut { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; }
#demo .ddonut .ring { width: 92px; height: 92px; border-radius: 50%; background: conic-gradient(#C8102E calc(var(--p) * 1%), #1F4E8C 0); display: grid; place-items: center; }
#demo .ddonut .ring b { background: #fff; border-radius: 50%; width: 60px; height: 60px; display: grid; place-items: center; font-size: 15px; }
#demo .ddonut .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; } #demo .sw.a { background: #C8102E; } #demo .sw.b { background: #1F4E8C; }
#demo .dsearch, #demo .dinput { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #C9D4E0; background: #fff; color: #0C2340; font: inherit; font-size: 14px; }
#demo label { font-size: 12px; color: #5D6D7E; margin-top: 4px; }
#demo .dbtn { width: 100%; padding: 12px; border-radius: 10px; border: 0; background: #1F4E8C; color: #fff; font: inherit; font-weight: 600; margin-top: 4px; }
#demo .dok { background: #E3F6E8; color: #1B7F3B; border-radius: 10px; padding: 12px; font-weight: 600; }
#demo .dcamp { text-align: left; background: #F7F9FC; border: 1px solid #E1E8F0; border-radius: 10px; padding: 10px 12px; font: inherit; color: #0C2340; display: flex; flex-direction: column; gap: 3px; }
#demo .dcamp small { color: #5D6D7E; font-size: 12px; }
#demo .dwiki { padding: 8px 0; border-bottom: 1px solid #E1E8F0; font-size: 13px; } #demo .dwiki div { color: #5D6D7E; }
#demo .dtoast { position: absolute; left: 14px; right: 14px; bottom: 18px; background: #0C2340; color: #fff; padding: 12px 14px; border-radius: 12px; font-size: 13px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
/* il pulsante per aprire la demo, in basso a sinistra sul telefono */
.demofab { position: fixed; left: 12px; bottom: 14px; z-index: 5; display: flex; align-items: center; gap: 7px; padding: 10px 13px; border-radius: 999px; border: 0; background: var(--sky); color: var(--navy); font: inherit; font-weight: 600; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.demofab .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(200,16,46,.25); }