/* Demo interattiva: la finestra di Omicron dentro il sito */
.scn { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.scn__tab { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; text-align: left; font-weight: 600; font-size: 15px; letter-spacing: -0.015em; line-height: 1.2; transition: transform 160ms var(--out), box-shadow 250ms var(--out), background-color 250ms var(--out), color 250ms; }
.scn__tab iconify-icon { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 21px; background: var(--fill); color: var(--accent); transition: background-color 250ms, color 250ms; }
.scn__tab em { display: block; font-style: normal; font-weight: 400; font-size: 12.5px; color: var(--ter); margin-top: 2px; letter-spacing: 0; }
.scn__tab:active { transform: scale(0.97); }
.scn__tab.is-on { background: var(--accent); color: #fff; box-shadow: 0 14px 30px -12px rgba(35, 80, 159, 0.7); }
.scn__tab.is-on em { color: rgba(255, 255, 255, 0.72); }
.scn__tab.is-on iconify-icon { background: rgba(255, 255, 255, 0.18); color: #fff; }
@media (hover: hover) and (pointer: fine) { .scn__tab:not(.is-on):hover { box-shadow: 0 0 0 1px rgba(35, 80, 159, 0.4), var(--shadow); } }
@media (max-width: 980px) { .scn { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .scn__tab { padding: 10px; gap: 8px; font-size: 13.5px; } .scn__tab iconify-icon { width: 30px; height: 30px; font-size: 17px; } .scn__tab em { display: none; } }

.frame { position: relative; border-radius: 34px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 60px 140px -30px rgba(16, 32, 80, 0.32), 0 20px 50px rgba(16, 32, 80, 0.1); overflow: hidden; }
.frame__bar { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.85); position: relative; z-index: 6; flex-wrap: wrap; }
.frame__brand { line-height: 0; color: var(--ink); }
.frame__company { font: 500 12.5px var(--mono); color: var(--sec); padding: 6px 10px; border-radius: 9px; background: var(--fill); }
.frame__tools { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.tool, .role { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border: 0; border-radius: 11px; background: var(--fill); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: transform 140ms var(--out), background-color 200ms; }
.tool:active { transform: scale(0.96); }
.tool iconify-icon, .role iconify-icon { font-size: 17px; }
.tool--accent { background: var(--accent); color: #fff; }
.role { cursor: default; }
.role span { color: var(--sec); }
.role select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: 600 13.5px var(--font); padding: 8px 14px 8px 0; cursor: pointer; color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; background-size: 12px; outline-offset: 4px; }
@media (hover: hover) { .tool:not(.tool--accent):hover { background: var(--fill2); } .tool--accent:hover { background: var(--accent-strong); } }
@media (max-width: 720px) { .tool span, .role span { display: none; } .frame__company { display: none; } }

.frame__stage { position: relative; height: clamp(520px, 78svh, 760px); background: radial-gradient(1200px 700px at 50% 35%, #ffffff, #f4f5f8 80%); overflow: hidden; touch-action: pan-y; }
.stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; outline: none; }
.stage__canvas.is-hover { cursor: pointer; }
.stage__canvas:active { cursor: grabbing; }
.stage__labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.stage__loading { position: absolute; inset: 0; display: grid; place-items: center; font: 500 13px var(--mono); color: var(--ter); letter-spacing: 0.04em; transition: opacity 500ms var(--out); }
.stage__loading.is-gone { opacity: 0; pointer-events: none; }
.stage__hint { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 99px; font-size: 13px; color: var(--sec); background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.07), 0 8px 24px rgba(16, 32, 80, 0.1); pointer-events: none; transition: opacity 400ms var(--out), transform 400ms var(--out); z-index: 3; white-space: nowrap; }
.stage__hint i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.8s var(--out) infinite; }
.stage__hint.is-hidden { opacity: 0; transform: translateY(8px); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(35, 80, 159, 0.5); } 100% { box-shadow: 0 0 0 10px rgba(35, 80, 159, 0); } }

/* etichette stanza */
.rlabel { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); padding: 7px 12px 8px; border-radius: 14px; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 8px 22px rgba(16, 32, 80, 0.12); white-space: nowrap; transition: opacity 400ms var(--out), box-shadow 300ms; will-change: transform; text-align: left; }
.rlabel b { display: block; font-size: 12.5px; font-weight: 650; letter-spacing: -0.015em; }
.rlabel span { display: block; font-size: 11px; color: var(--sec); margin-top: 1px; font-variant-numeric: tabular-nums; }
.rlabel.is-dim { opacity: 0; }
.rlabel.is-hot { box-shadow: 0 0 0 1.5px var(--accent), 0 8px 22px rgba(35, 80, 159, 0.28); }
.rlabel.is-alert { box-shadow: 0 0 0 1.5px #ff9500, 0 8px 22px rgba(255, 149, 0, 0.3); }
.rlabel.is-alert::after { content: '!'; position: absolute; right: -8px; top: -8px; width: 20px; height: 20px; border-radius: 50%; background: #ff9500; color: #fff; font: 700 12px/20px var(--font); text-align: center; animation: pulse 1.4s infinite; }
.rlabel.is-lock span { color: var(--ter); }
.pbadge { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); pointer-events: none; display: flex; align-items: center; gap: 5px; padding: 3px 8px 3px 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.08); font: 600 10.5px var(--mono); color: var(--ink); transition: opacity 300ms; will-change: transform; }
.pbadge i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.pbadge.is-dim { opacity: 0; }

/* registro */
.feed { position: absolute; left: 16px; bottom: 16px; width: 290px; max-width: calc(100% - 32px); padding: 12px 14px 8px; border-radius: 22px; background: rgba(255, 255, 255, 0.7); -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 0.5px rgba(0, 0, 0, 0.07), 0 20px 50px rgba(16, 32, 80, 0.14); z-index: 4; transition: opacity 400ms var(--out), transform 500ms var(--out); }
.feed header { display: flex; align-items: center; gap: 8px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--sec); margin-bottom: 6px; }
.live { width: 7px; height: 7px; border-radius: 50%; background: #34c759; animation: pulse2 2s infinite; }
@keyframes pulse2 { 0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.6); } 100% { box-shadow: 0 0 0 8px rgba(52, 199, 89, 0); } }
.feed ul { display: grid; gap: 2px; max-height: 148px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.feed li { display: grid; grid-template-columns: 8px 1fr auto; gap: 9px; align-items: baseline; font-size: 12.5px; padding: 4px 0; animation: feedin 500ms var(--out); line-height: 1.3; }
.feed li i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); align-self: center; }
.feed li span { color: var(--ter); font: 400 10.5px var(--mono); }
.feed li em { font-style: normal; color: var(--sec); }
.frame.is-inside .feed { opacity: 0; transform: translateY(12px); pointer-events: none; }
@media (max-width: 760px) { .feed { display: none; } }

/* pannello reparto */
.panel { position: absolute; top: 14px; right: 14px; bottom: 14px; width: min(390px, calc(100% - 28px)); padding: 16px; border-radius: 28px; background: rgba(255, 255, 255, 0.76); -webkit-backdrop-filter: blur(34px) saturate(190%) brightness(1.04); backdrop-filter: blur(34px) saturate(190%) brightness(1.04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 0.5px rgba(255, 255, 255, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.035), 0 40px 100px rgba(16, 32, 80, 0.2); z-index: 5; display: flex; flex-direction: column; overflow: hidden; transform: translateX(calc(100% + 30px)); transition: transform 500ms var(--sheet); }
.panel[hidden] { display: none; }
.panel.is-in { transform: none; }
.panel__back { align-self: flex-start; border: 0; background: rgba(0, 0, 0, 0.05); padding: 7px 13px; border-radius: 99px; font: 500 13px var(--font); cursor: pointer; margin-bottom: 14px; transition: transform 140ms var(--out), background-color 200ms; }
.panel__back:active { transform: scale(0.96); }
@media (hover: hover) { .panel__back:hover { background: rgba(0, 0, 0, 0.09); } }
.panel__body { overflow-y: auto; overscroll-behavior: contain; margin: 0 -6px; padding: 0 6px 4px; scrollbar-width: none; }
.panel__body::-webkit-scrollbar { display: none; }
.pn-h { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.pn-h .ic { width: 46px; height: 46px; border-radius: 14px; background: var(--c); color: #fff; display: grid; place-items: center; font-size: 25px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 20px -10px rgba(0, 0, 0, 0.5); }
.pn-h h3 { font: 700 22px/1.1 var(--font-d); letter-spacing: -0.03em; }
.pn-h small { color: var(--sec); font-size: 12.5px; display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.pn-h small i { width: 7px; height: 7px; border-radius: 50%; background: #34c759; }
.pn-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.pn-m { padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.8); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06); }
.pn-m span { display: block; font-size: 11.5px; color: var(--sec); line-height: 1.25; min-height: 28px; }
.pn-m b { display: block; font: 700 28px/1.1 var(--font-d); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.pn-m b small { font-size: 14px; font-weight: 500; color: var(--ter); letter-spacing: -0.01em; margin-left: 2px; }
.pn-m.is-new { animation: popin 700ms var(--out); box-shadow: 0 0 0 1.5px var(--accent), 0 8px 20px -8px rgba(35, 80, 159, 0.5); }
@keyframes popin { from { opacity: 0; transform: scale(0.9); } }
.pn-t { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ter); margin: 4px 2px 8px; }
.pn-people { display: grid; gap: 4px; }
.pn-p { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.66); border: 0; text-align: left; cursor: pointer; width: 100%; transition: transform 140ms var(--out), background-color 200ms; }
.pn-p:active { transform: scale(0.98); }
@media (hover: hover) { .pn-p:hover { background: #fff; } }
.pn-p b { font-size: 14px; font-weight: 600; letter-spacing: -0.015em; display: block; }
.pn-p small { font-size: 12px; color: var(--sec); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 99px; font: 600 11.5px var(--font); background: color-mix(in srgb, var(--c) 14%, white); color: color-mix(in srgb, var(--c) 78%, black); white-space: nowrap; transition: background-color 400ms, color 400ms; }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.pn-lock { display: grid; place-items: center; text-align: center; gap: 10px; padding: 36px 20px; border-radius: 22px; background: rgba(255, 255, 255, 0.6); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06); }
.pn-lock iconify-icon { font-size: 34px; color: var(--ter); }
.pn-lock b { font: 700 18px var(--font-d); letter-spacing: -0.025em; }
.pn-lock p { font-size: 13.5px; color: var(--sec); max-width: 28ch; }
.pn-src { margin-top: 14px; font: 400 11.5px var(--mono); color: var(--ter); display: flex; align-items: center; gap: 7px; }
.pn-src i { width: 6px; height: 6px; border-radius: 50%; background: #34c759; }
.pn-alert { margin-bottom: 14px; padding: 12px 14px; border-radius: 16px; background: #fff4e5; color: #8a4b00; font-size: 13.5px; display: flex; gap: 10px; align-items: flex-start; box-shadow: 0 0 0 0.5px rgba(255, 149, 0, 0.4); animation: popin 500ms var(--out); }
.pn-alert iconify-icon { font-size: 18px; flex: none; margin-top: 1px; }
@media (max-width: 700px) {
  .panel { top: auto; left: 10px; right: 10px; bottom: 10px; width: auto; height: 62%; transform: translateY(calc(100% + 20px)); }
}

/* scheda persona */
.pcard { position: absolute; z-index: 7; width: 230px; padding: 14px 16px; border-radius: 20px; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(26px) saturate(190%); backdrop-filter: blur(26px) saturate(190%); box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 24px 60px rgba(16, 32, 80, 0.22); pointer-events: none; transform: translate(-50%, calc(-100% - 22px)); animation: cardin 220ms var(--out); }
.pcard[hidden] { display: none; }
@keyframes cardin { from { opacity: 0; transform: translate(-50%, calc(-100% - 10px)) scale(0.96); } }
.pcard b { font: 650 15px var(--font-d); letter-spacing: -0.02em; }
.pcard small { display: block; color: var(--sec); font-size: 12px; margin-bottom: 8px; }
.pcard .pill { margin-bottom: 8px; }
.pcard dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; font-size: 12px; }
.pcard dt { color: var(--sec); }
.pcard dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* fogli (connettori, assistente) */
.sheet { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 18px; background: rgba(245, 246, 249, 0.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: fade 300ms var(--out); }
.sheet[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.sheet__card { width: min(560px, 100%); max-height: 100%; display: flex; flex-direction: column; border-radius: 30px; padding: 20px; background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(34px) saturate(190%); backdrop-filter: blur(34px) saturate(190%); box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(255, 255, 255, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.04), 0 40px 100px rgba(16, 32, 80, 0.24); animation: sheetin 450ms var(--sheet); overflow: hidden; }
@keyframes sheetin { from { opacity: 0; transform: translateY(24px) scale(0.97); } }
.sheet__head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.sheet__head h3 { font: 700 22px var(--font-d); letter-spacing: -0.03em; }
.sheet__head p { font-size: 13px; color: var(--sec); }
.sheet__x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.06); font-size: 20px; line-height: 1; cursor: pointer; transition: transform 140ms var(--out), background-color 200ms; }
.sheet__x:active { transform: scale(0.92); }
@media (hover: hover) { .sheet__x:hover { background: rgba(0, 0, 0, 0.11); } }
.apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 6px; overflow-y: auto; padding: 4px 2px 8px; }
.appi { display: grid; justify-items: center; gap: 6px; font-size: 11.5px; text-align: center; color: var(--ink); position: relative; animation: popin 500ms var(--out) backwards; }
.appi i { width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center; font-size: 29px; color: #fff; background: var(--c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -8px 14px -8px rgba(0, 0, 0, 0.2), 0 10px 20px -10px rgba(0, 0, 0, 0.5); font-style: normal; }
.appi small { display: flex; align-items: center; gap: 4px; color: var(--sec); font-size: 10.5px; }
.appi small::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #34c759; }
.appi.is-new i { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--accent), 0 10px 20px -10px rgba(0, 0, 0, 0.5); }
.addconn { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.addconn__t { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ter); margin-bottom: 10px; }
.addconn__row { display: flex; gap: 6px; flex-wrap: wrap; }
.addbtn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 8px; border: 0; border-radius: 12px; background: var(--fill); font-size: 13px; font-weight: 500; cursor: pointer; transition: transform 140ms var(--out), background-color 200ms; }
.addbtn i { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; color: #fff; background: var(--c); }
.addbtn:active { transform: scale(0.96); }
.addbtn:disabled { opacity: 0.4; cursor: default; }
@media (hover: hover) { .addbtn:not(:disabled):hover { background: var(--fill2); } }
.addconn__steps { display: grid; gap: 8px; margin-top: 4px; }
.addconn__steps[hidden] { display: none; }
.st { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ter); transition: color 300ms; }
.st i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #d6d9e0; position: relative; transition: all 300ms var(--out); }
.st.is-run { color: var(--ink); }
.st.is-run i { border-color: var(--accent) transparent var(--accent) var(--accent); animation: spin 700ms linear infinite; }
.st.is-done { color: var(--ink); }
.st.is-done i { background: #34c759 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat; border-color: #34c759; }
@keyframes spin { to { rotate: 360deg; } }
@media (max-width: 480px) { .apps { grid-template-columns: repeat(3, 1fr); } }

/* chat assistente */
.sheet--ai .sheet__card { height: min(560px, 100%); }
.chat { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 10px; min-height: 120px; scrollbar-width: none; }
.chat::-webkit-scrollbar { display: none; }
.msg { max-width: 88%; padding: 11px 15px; border-radius: 20px; font-size: 14.5px; line-height: 1.45; animation: popin 400ms var(--out); white-space: pre-line; }
.msg--u { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 7px; }
.msg--a { align-self: flex-start; background: rgba(0, 0, 0, 0.05); border-bottom-left-radius: 7px; }
.msg--a b { font-weight: 650; }
.msg .cursor { display: inline-block; width: 7px; height: 14px; background: var(--ink); vertical-align: -2px; margin-left: 2px; animation: blink 800ms steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.msg--dots { display: flex; gap: 4px; padding: 14px 16px; }
.msg--dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ter); animation: dot 1s infinite var(--move); }
.msg--dots i:nth-child(2) { animation-delay: 150ms; } .msg--dots i:nth-child(3) { animation-delay: 300ms; }
@keyframes dot { 50% { transform: translateY(-4px); opacity: 0.4; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 10px; }
.chips button { border: 0; padding: 8px 13px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font: 500 12.5px var(--font); cursor: pointer; transition: transform 140ms var(--out), background-color 200ms; }
.chips button:active { transform: scale(0.96); }
@media (hover: hover) { .chips button:hover { background: rgba(35, 80, 159, 0.18); } }
.ask { display: flex; gap: 8px; }
.ask input { flex: 1; height: 44px; padding: 0 16px; border: 0; border-radius: 14px; background: rgba(0, 0, 0, 0.055); font: 400 15px var(--font); outline: none; transition: background-color 200ms, box-shadow 200ms; }
.ask input:focus { background: #fff; box-shadow: 0 0 0 2px var(--accent); }
.ask button { width: 44px; height: 44px; border: 0; border-radius: 14px; background: var(--accent); color: #fff; font-size: 20px; cursor: pointer; display: grid; place-items: center; transition: transform 140ms var(--out); }
.ask button:active { transform: scale(0.94); }

.frame__foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--sec); background: #fff; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.note { color: var(--ter); }
@media (max-width: 760px) { .note { display: none; } }
@media (max-width: 700px) {
  .rlabel { padding: 4px 8px; border-radius: 10px; }
  .rlabel b { font-size: 10.5px; }
  .rlabel span { display: none; }
  .frame__stage { height: clamp(460px, 68svh, 620px); }
}

/* ===== Fedeltà a Omicron: bianco puro, barra di vetro, pillole dei numeri, etichette in maiuscoletto ===== */
.frame { border-radius: 30px; }
.frame__stage { background: #fff; height: clamp(540px, 80svh, 780px); }
.frame__bar { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 6; padding: 0; border: 0; background: none; pointer-events: none; gap: 10px; }
.frame__brand, .frame__tools, .frame__company { pointer-events: auto; }
.frame__brand { display: flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 22px; background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(26px) saturate(190%); backdrop-filter: blur(26px) saturate(190%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 8px 26px rgba(16, 32, 80, 0.1); }
.frame__company { background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08); font-family: var(--mono); height: 32px; display: flex; align-items: center; }
.frame__tools { padding: 4px; border-radius: 22px; gap: 2px; background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(26px) saturate(190%); backdrop-filter: blur(26px) saturate(190%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 8px 26px rgba(16, 32, 80, 0.1); }
.frame__tools .tool, .frame__tools .role { background: transparent; height: 36px; border-radius: 18px; }
.frame__tools .tool--accent { background: var(--accent); }
@media (hover: hover) { .frame__tools .tool:not(.tool--accent):hover { background: rgba(0, 0, 0, 0.06); } }

.pills { position: absolute; left: 16px; top: 66px; z-index: 4; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 32px); pointer-events: none; transition: opacity 400ms var(--out); }
.frame.is-inside .pills { opacity: 0; }
.pill-m { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px 0 11px; border-radius: 12px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(16, 32, 80, 0.05); font-size: 12px; color: var(--sec); white-space: nowrap; }
.pill-m i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.pill-m b { font: 600 14.5px var(--font-d); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.rlabel { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; padding: 0; text-align: center; text-shadow: 0 0 5px #fff, 0 0 3px #fff, 0 0 10px #fff; }
.rlabel b { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink); }
.rlabel span { font: 400 10.5px var(--mono); color: var(--ter); letter-spacing: 0; margin-top: 2px; }
.rlabel.is-hot b { color: var(--accent); }
.rlabel.is-hot, .rlabel.is-alert { box-shadow: none; }
.rlabel.is-alert b { color: #c76a00; }
.rlabel.is-alert::after { right: -22px; top: -4px; }
.pill .tm { font: 500 10.5px var(--mono); opacity: 0.7; margin-left: 4px; }
.pn-empty { color: var(--sec); font-size: 13px; padding: 8px 4px; }
.pn-p .pill { max-width: 62%; overflow: hidden; }
@media (max-width: 700px) {
  .pills { top: 62px; } .pill-m { height: 28px; font-size: 11px; padding: 0 10px 0 9px; } .pill-m b { font-size: 13px; }
  .rlabel b { font-size: 9.5px; } .rlabel span { display: none; }
}
.frame__bar { flex-wrap: nowrap; }
@media (max-width: 900px) { .frame__company, .role span { display: none; } }
.pn-p .pill { max-width: none; }
.pn-p > div { min-width: 0; }
.pn-p small { font-family: var(--mono); font-size: 11px; }

/* ===== Barra e pannelli identici a Omicron (v2) ===== */
.frame__bar { position: relative; top: auto; left: auto; right: auto; z-index: 9; display: flex; align-items: center; gap: 10px; padding: 12px 14px; flex-wrap: wrap; background: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.06); pointer-events: auto; }
.bar__brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.bar__sep { width: 1px; height: 20px; background: rgba(0, 0, 0, 0.12); }
.bar__name { font-size: 15px; color: var(--sec); font-weight: 500; }
.bar__pills { display: flex; align-items: center; gap: 8px; }
.bpill { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 0; border-radius: 99px; font: 500 13.5px var(--font); background: var(--fill); color: var(--sec); white-space: nowrap; }
.bpill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bpill--clock { background: none; color: var(--sec); padding: 0 4px; font-variant-numeric: tabular-nums; font-size: 15px; }
.bpill--red { background: #ffe3e5; color: #d70015; cursor: pointer; font-weight: 600; transition: transform 140ms var(--out); }
.bpill--red b { font-weight: 700; font-variant-numeric: tabular-nums; }
.bpill--red:active { transform: scale(0.96); }
.bpill--red.is-open { background: #ffd0d4; }
.bar__search { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; min-width: 200px; flex: 1 1 200px; max-width: 320px; border: 0; border-radius: 99px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(16, 32, 80, 0.06); color: var(--ter); font: 400 14.5px var(--font); cursor: text; text-align: left; }
.bar__search iconify-icon { color: var(--accent); font-size: 18px; }
.bar__search span { flex: 1; }
.bar__search kbd, .srch kbd { font: 500 11px var(--mono); padding: 3px 7px; border-radius: 7px; background: var(--fill); color: var(--ter); }
.bar__nav { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(16, 32, 80, 0.06); margin-left: auto; flex-wrap: wrap; }
.nav-i { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 0; border-radius: 99px; background: transparent; font: 500 14px var(--font); color: var(--ink); cursor: pointer; transition: background-color 160ms, transform 140ms var(--out); }
.nav-i iconify-icon { font-size: 17px; color: var(--sec); }
.nav-i iconify-icon:last-child:not(:first-child) { font-size: 13px; opacity: 0.6; transition: transform 200ms var(--out); }
.nav-i:active { transform: scale(0.97); }
.nav-i.is-open { background: var(--fill); }
.nav-i.is-open iconify-icon:last-child { transform: rotate(180deg); }
@media (hover: hover) { .nav-i:hover { background: var(--fill); } }
.nav-i--acc { background: #e8eef9; color: var(--accent); }
.nav-i--acc iconify-icon { color: var(--accent); }
.nbadge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; font: 600 12px/22px var(--font); text-align: center; color: #fff; font-style: normal; font-variant-numeric: tabular-nums; }
.nbadge--amber { background: #ff9f0a; } .nbadge--red { background: #e5242f; }
@media (max-width: 1180px) { .bar__search span { display: none; } .bar__search { min-width: 90px; flex: 0 0 auto; } .bar__nav { margin-left: 0; } }
@media (max-width: 900px) { .bar__pills .bpill--gray, .bar__name, .bar__sep { display: none; } .nav-i span { display: none; } .nav-i { padding: 0 9px; } .nav-i .nbadge { display: none; } .nav-i--acc { padding: 0 10px; } }

/* menu a tendina */
.bar__menus { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.bar__menus[hidden] { display: none; }
.menu { position: absolute; width: 292px; max-height: 380px; overflow-y: auto; padding: 8px; border-radius: 22px; pointer-events: auto; background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%); box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 24px 60px rgba(16, 32, 80, 0.22); animation: menuin 220ms var(--out); transform-origin: top left; }
@keyframes menuin { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }
.mhead { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ter); padding: 8px 10px 6px; }
.mrow { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 14px; background: transparent; text-align: left; cursor: pointer; transition: background-color 140ms; }
@media (hover: hover) { .mrow:hover { background: rgba(0, 0, 0, 0.05); } }
.mrow:active { background: rgba(0, 0, 0, 0.08); }
.mrow__ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--c); color: #fff; font-size: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.mrow__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin: 0 12px 0 7px; }
.mrow__t { display: grid; min-width: 0; }
.mrow__t b { font: 600 14px var(--font); letter-spacing: -0.01em; }
.mrow__t small { font-size: 12px; color: var(--sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow__al { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: #e5242f; box-shadow: 0 0 0 3px rgba(229, 36, 47, 0.18); }
.mrow__ck { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat; }
.mnone { font-size: 12.5px; color: var(--sec); padding: 8px 12px; }

/* scena: pulsante hint e pillole sotto la barra (la barra non è più sovrapposta) */
.frame__stage { height: clamp(520px, 74svh, 760px); }
.pills { top: 14px; }

/* etichette: card bianche come in Omicron */
.rlabel { padding: 6px 12px 7px; border-radius: 11px; background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(16, 32, 80, 0.08); text-shadow: none; text-align: center; }
.rlabel b { font: 600 13.5px var(--font); letter-spacing: -0.015em; text-transform: none; color: var(--ink); }
.rlabel span { font: 400 12px var(--font); color: var(--sec); margin-top: 1px; }
.rlabel.is-hot { box-shadow: 0 0 0 1.5px var(--accent), 0 4px 14px rgba(35, 80, 159, 0.22); }
.rlabel.is-hot b { color: var(--ink); }
.rlabel.is-alert { box-shadow: 0 0 0 1px rgba(229, 36, 47, 0.45), 0 4px 14px rgba(229, 36, 47, 0.18); }
.rlabel.is-alert span { color: #c76a00; }
.rlabel.is-alert b { color: var(--ink); }
.rlabel.is-alert::after { display: none; }
.rl-dot { display: none; position: absolute; right: -5px; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: #e5242f; box-shadow: 0 0 0 3px rgba(229, 36, 47, 0.22); animation: pulse 1.6s infinite; }
.rlabel.is-alert .rl-dot { display: block; }
@media (max-width: 700px) { .rlabel b { font-size: 11px; } .rlabel span { display: none; } }
.etag { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(16, 32, 80, 0.1); font: 600 11px var(--font); white-space: nowrap; pointer-events: none; will-change: transform; transition: opacity 300ms; margin-top: -4px; }
.etag i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.etag span { font-weight: 400; color: var(--sec); }
.etag.is-dim { opacity: 0; }

/* pannello: sotto la barra, con pulsante di chiusura sempre visibile */
.panel { top: 12px; bottom: 12px; right: 12px; z-index: 5; }
.panel__bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.panel__bar .panel__back { margin: 0; }
.panel__x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.06); font-size: 20px; line-height: 1; cursor: pointer; transition: transform 140ms var(--out), background-color 200ms; }
.panel__x:active { transform: scale(0.92); }
@media (hover: hover) { .panel__x:hover { background: rgba(0, 0, 0, 0.12); } }
.pn-spark { height: 56px; margin: 0 0 14px; padding: 4px 6px; border-radius: 14px; background: rgba(255, 255, 255, 0.7); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06); }
.pn-spark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pn-ev { display: grid; gap: 2px; margin-bottom: 4px; }
.pn-ev li { display: grid; grid-template-columns: 8px 1fr auto; gap: 9px; align-items: baseline; font-size: 12.5px; padding: 5px 4px; line-height: 1.3; }
.pn-ev li i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); align-self: center; }
.pn-ev li span { font: 400 10.5px var(--mono); color: var(--ter); }
.pn-ev li em { font-style: normal; color: var(--sec); }
.pn-none { color: var(--sec); }
.pn-ev .pn-none::before { display: none; }

/* ricerca e centro */
.sheet__card--search { width: min(560px, 100%); padding: 10px; align-self: start; margin-top: 8%; }
.sheet--search { align-items: start; }
.srch { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.srch iconify-icon { font-size: 20px; color: var(--accent); }
.srch input { flex: 1; border: 0; outline: 0; background: none; font: 400 17px var(--font); color: var(--ink); }
.srch__list { max-height: 340px; overflow-y: auto; display: grid; gap: 2px; padding: 4px 0 2px; border-top: 1px solid var(--line); margin-top: 6px; }
.srch__list button { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; padding: 8px 10px; border-radius: 14px; text-align: left; cursor: pointer; }
@media (hover: hover) { .srch__list button:hover { background: rgba(0, 0, 0, 0.05); } }
.sheet__card--wide { width: min(760px, 100%); }
.centro { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; overflow-y: auto; padding: 2px; }
.ccard { position: relative; display: grid; gap: 4px; justify-items: start; padding: 14px; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(16, 32, 80, 0.05); text-align: left; cursor: pointer; transition: transform 160ms var(--out), box-shadow 200ms; }
.ccard:active { transform: scale(0.97); }
@media (hover: hover) { .ccard:hover { box-shadow: 0 0 0 1.5px var(--c), 0 10px 24px rgba(16, 32, 80, 0.12); } }
.ccard__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--c); color: #fff; font-size: 18px; margin-bottom: 6px; }
.ccard b { font: 600 14px var(--font); }
.ccard__v { font: 700 24px var(--font-d); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ccard small { color: var(--sec); font-size: 12px; }
.ccard__al { position: absolute; right: 12px; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: #e5242f; color: #fff; font: 700 12px/20px var(--font); text-align: center; font-style: normal; }

/* ===== Cruscotti di gestione (cantieri, logistica) ===== */
.seg { display: inline-flex; padding: 3px; border-radius: 99px; background: var(--fill); gap: 2px; }
.seg[hidden] { display: none; }
.seg button { border: 0; height: 32px; padding: 0 14px; border-radius: 99px; background: transparent; font: 500 13.5px var(--font); color: var(--sec); cursor: pointer; transition: background-color 200ms var(--out), color 200ms, box-shadow 200ms; }
.seg button.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); }
.dash { position: absolute; inset: 0; z-index: 7; background: #fff; overflow: hidden; animation: fade 300ms var(--out); }
.dash[hidden] { display: none; }
.dash__in { height: 100%; }
.frame.is-gest .stage__hint, .frame.is-gest .pills, .frame.is-gest .feed { display: none; }
.frame.is-gest .frame__stage { height: clamp(620px, 84svh, 860px); }
.frame.is-gest .frame__foot .note { display: none; }

.gs { height: 100%; display: grid; grid-template-columns: 290px minmax(0, 1fr); background: #fff; color: var(--ink); font-size: 13px; }
.gs--log { grid-template-columns: 1fr; }
.gs-list { border-right: 1px solid var(--line); padding: 14px 12px; overflow-y: auto; display: grid; gap: 8px; align-content: start; background: #fafbfc; }
.gs-list__t { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 6px 4px; }
.gs-list__t b { font: 700 16px var(--font-d); letter-spacing: -0.02em; }
.gs-list__t small { color: var(--ter); }
.gs-site { display: grid; gap: 5px; text-align: left; width: 100%; padding: 12px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(16, 32, 80, 0.04); cursor: pointer; transition: transform 160ms var(--out), box-shadow 220ms var(--out); }
.gs-site:active { transform: scale(0.98); }
@media (hover: hover) { .gs-site:hover { box-shadow: 0 0 0 1px var(--c), 0 8px 20px rgba(16, 32, 80, 0.1); } }
.gs-site.is-on { box-shadow: 0 0 0 2px var(--c), 0 10px 26px rgba(16, 32, 80, 0.12); }
.gs-site__top { display: flex; align-items: center; gap: 8px; }
.gs-site__top i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.gs-site__top b { font: 600 13.5px var(--font); letter-spacing: -0.01em; flex: 1; }
.gs-site small { color: var(--sec); }
.gs-site__m { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--sec); }
.gs-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #e5242f; color: #fff; font: 600 11.5px/20px var(--font); text-align: center; font-style: normal; }
.gs-new { height: 40px; border: 1.5px dashed #cfd3dc; border-radius: 14px; background: none; color: var(--ter); font: 500 13px var(--font); }
.gs-bar { position: relative; display: block; height: 7px; border-radius: 4px; background: #e8eaf0; overflow: visible; }
.gs-bar u { position: absolute; left: 0; top: 0; height: 100%; border-radius: 4px; background: var(--accent); transition: width 600ms var(--out); text-decoration: none; }
.gs-site .gs-bar u { background: var(--c); }
.gs-bar s { position: absolute; top: -3px; width: 2px; height: 13px; background: #1d1d1f; border-radius: 1px; }
.gs-bar--l { height: 9px; margin-bottom: 3px; }
.gs-bar.warn u { background: #ff9f0a; }
.gs-main { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.gs-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 18px 8px; flex-wrap: wrap; }
.gs-head h3 { font: 700 22px var(--font-d); letter-spacing: -0.03em; }
.gs-head p { color: var(--sec); font-size: 12.5px; margin-top: 2px; }
.gs-head__r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.gs-src-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.gs-src-row b { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ter); margin-right: 4px; }
.gs-src { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 5px; border-radius: 99px; background: var(--fill); font-size: 11px; color: var(--sec); white-space: nowrap; }
.gs-src i { font-style: normal; display: grid; place-items: center; font-size: 14px; }
.gs-more { font: 500 11px var(--mono); color: var(--ter); font-style: normal; }
.gs-tabs { display: flex; gap: 2px; padding: 0 14px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.gs-tabs::-webkit-scrollbar { display: none; }
.gs-tabs button { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; border: 0; background: none; font: 500 13px var(--font); color: var(--sec); white-space: nowrap; cursor: pointer; transition: color 160ms; }
.gs-tabs button iconify-icon { font-size: 16px; }
.gs-tabs button::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transition: transform 260ms var(--out); }
.gs-tabs button.is-on { color: var(--ink); }
.gs-tabs button.is-on::after { transform: scaleX(1); }
.gs-tabs em { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e5242f; color: #fff; font: 600 11px/18px var(--font); text-align: center; font-style: normal; }
@media (hover: hover) { .gs-tabs button:hover { color: var(--ink); } }
.gs-body { flex: 1; overflow-y: auto; padding: 14px 18px 22px; display: grid; gap: 12px; align-content: start; background: #fbfbfd; animation: fade 260ms var(--out); }
.gs-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.gs-kpis--3 { grid-template-columns: repeat(3, 1fr); } .gs-kpis--4 { grid-template-columns: repeat(4, 1fr); }
.gs--log .gs-kpis--5 { padding: 4px 18px 0; }
.gs-kpi { padding: 11px 13px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08); display: grid; gap: 1px; }
.gs-kpi span { font-size: 11.5px; color: var(--sec); }
.gs-kpi b { font: 700 22px var(--font-d); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.gs-kpi small { font-size: 11px; color: var(--ter); }
.gs-kpi.ok b { color: #1f9d55; } .gs-kpi.warn b { color: #c76a00; } .gs-kpi.ko b { color: #d70015; }
.gs-grid2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; }
.gs-card { padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(16, 32, 80, 0.03); min-width: 0; }
.gs-card h4 { font: 600 13px var(--font); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gs-chart { width: 100%; height: 130px; display: block; }
.gs-leg { display: flex; gap: 14px; font-size: 11.5px; color: var(--sec); flex-wrap: wrap; }
.gs-leg span { display: inline-flex; align-items: center; gap: 6px; }
.gs-leg i { width: 10px; height: 10px; border-radius: 3px; } .gs-leg i.dash { border-top: 2px dashed #c7cad3; height: 0; border-radius: 0; width: 14px; } .gs-leg i.hub { background: #23509f; border-radius: 50%; }
.gs-people, .gs-todo, .gs-cert, .gs-timb, .gs-diario, .gs-ship, .gs-pick { display: grid; gap: 2px; }
.gs-people li { display: grid; grid-template-columns: 10px 1fr auto auto; gap: 10px; align-items: center; padding: 5px 2px; }
.gs-people li i, .gs-timb li i, .gs-cert li i { width: 9px; height: 9px; border-radius: 50%; background: var(--c, #30b350); }
.gs-people li small { color: var(--ter); } .gs-people li span { color: var(--sec); font: 400 11px var(--mono); }
.gs-people li.off { opacity: 0.5; }
.gs-todo li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; padding: 6px 2px; }
.gs-todo li > span { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--fill); font-size: 15px; color: var(--sec); }
.gs-todo li.ko > span { background: #ffe3e5; color: #d70015; } .gs-todo li.warn > span { background: #fff1d8; color: #c76a00; }
.gs-todo small, .gs-cert small, .gs-diario small { display: block; color: var(--sec); font-size: 11.5px; }
.gs-meteo > div { display: flex; align-items: center; gap: 12px; } .gs-meteo b { font-size: 34px; color: #f59e0b; display: grid; } .gs-meteo strong { font: 700 24px var(--font-d); } .gs-meteo p { color: var(--sec); font-size: 12px; margin: 8px 0; }
.gs-bar2 { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.gs-bar2 b { font: 700 15px var(--font-d); display: block; } .gs-bar2 small { color: var(--sec); font-size: 12px; }
.gs-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border: 0; border-radius: 11px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.14); font: 500 12.5px var(--font); color: var(--ink); cursor: pointer; transition: transform 140ms var(--out), background-color 200ms; white-space: nowrap; }
.gs-btn:active { transform: scale(0.96); } .gs-btn:disabled { opacity: 0.45; cursor: default; }
.gs-btn--sm { height: 28px; padding: 0 10px; border-radius: 9px; font-size: 12px; }
.gs-btn--acc { background: var(--accent); color: #fff; box-shadow: 0 8px 18px -8px rgba(35, 80, 159, 0.8); }
@media (hover: hover) { .gs-btn:not(:disabled):not(.gs-btn--acc):hover { background: #f1f2f6; } }
.gs-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 16px; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08); overflow: hidden; font-size: 12.5px; }
.gs-table th { text-align: left; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ter); padding: 10px 12px; background: #fafbfc; border-bottom: 1px solid var(--line); }
.gs-table td { padding: 9px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); vertical-align: middle; }
.gs-table tbody tr:last-child td { border-bottom: 0; }
.gs-table tfoot td { background: #fafbfc; padding: 10px 12px; }
.gs-table small { color: var(--sec); }
.gs-table tr.is-new, .gs-cert li.is-new, .gs-diario li.is-new { animation: popin 700ms var(--out); background: rgba(35, 80, 159, 0.06); }
.gs-st { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 99px; font: 600 11px var(--font); background: #eef0f4; color: #5b606b; white-space: nowrap; }
.gs-st--ok { background: #e3f6ea; color: #17803f; } .gs-st--warn { background: #fff1d8; color: #a85a00; } .gs-st--ko { background: #ffe3e5; color: #c20f20; } .gs-st--blu { background: #e2eeff; color: #1a5fd0; } .gs-st--grigio { background: #eef0f4; color: #6e6e73; }
.gs-pill { padding: 5px 12px; border-radius: 99px; font: 600 12px var(--font); } .gs-pill--ok { background: #e3f6ea; color: #17803f; } .gs-pill--ko { background: #ffe3e5; color: #c20f20; } .gs-pill--blu { background: #e2eeff; color: #1a5fd0; }
.gs-note { color: var(--sec); font-size: 12px; }
.gs-turni { display: grid; gap: 4px; padding: 10px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08); overflow-x: auto; }
.gs-turni__h, .gs-turni__r { display: grid; grid-template-columns: minmax(130px, 1.4fr) repeat(7, minmax(36px, 1fr)) 44px; gap: 5px; align-items: center; }
.gs-turni__h b { font: 500 11px var(--mono); text-align: center; color: var(--ter); text-transform: uppercase; }
.gs-turni__r > span b { display: block; font-size: 12.5px; } .gs-turni__r > span small { color: var(--ter); font-size: 11px; }
.gs-turni__r button { height: 30px; border: 0; border-radius: 9px; background: color-mix(in srgb, var(--c) 18%, #fff); color: color-mix(in srgb, var(--c) 80%, #000); font: 700 12px var(--font); cursor: pointer; transition: transform 120ms var(--out), background-color 200ms; }
.gs-turni__r button:active { transform: scale(0.9); }
.gs-turni .ore { text-align: right; font: 600 12px var(--mono); }
.gs-timb li { display: grid; grid-template-columns: 10px 140px 150px 1fr; gap: 10px; align-items: center; padding: 5px 2px; } .gs-timb li small { color: var(--sec); display: flex; align-items: center; gap: 4px; }
.gs-drop { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; border: 1.5px dashed #c8cede; background: #fff; }
.gs-drop > iconify-icon { font-size: 28px; color: var(--accent); } .gs-drop > div { flex: 1; } .gs-drop b { font: 600 13.5px var(--font); } .gs-drop small { color: var(--sec); display: block; }
.gs-cert li { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 11px; align-items: center; padding: 8px 4px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
.gs-cert li:last-child { border-bottom: 0; } .gs-cert li b { font-weight: 600; font-size: 12.5px; }
.gs-cert li.ok i { background: #30b350; } .gs-cert li.warn i { background: #ff9f0a; } .gs-cert li.ko i { background: #e5242f; box-shadow: 0 0 0 3px rgba(229, 36, 47, 0.18); }
.gs-costi { display: grid; gap: 10px; }
.gs-costi > div { display: grid; grid-template-columns: 90px 1fr 100px 100px; gap: 12px; align-items: center; font-size: 12.5px; } .gs-costi small { color: var(--ter); }
.gs-two { position: relative; height: 16px; } .gs-two u { position: absolute; left: 0; top: 0; height: 7px; border-radius: 4px; background: #d4d8e2; text-decoration: none; } .gs-two s { position: absolute; left: 0; bottom: 0; height: 7px; border-radius: 4px; }
.gs-add { display: flex; gap: 8px; } .gs-add input { flex: 1; height: 38px; padding: 0 14px; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.14); font: 400 13px var(--font); outline: none; } .gs-add input:focus { box-shadow: 0 0 0 2px var(--accent); }
.gs-diario li { display: grid; grid-template-columns: 10px 1fr auto; gap: 11px; align-items: start; padding: 8px 4px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .gs-diario li > i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-top: 5px; } .gs-diario b { font-weight: 500; font-size: 12.5px; }
.gs-tag { font: 600 10.5px var(--font); padding: 3px 8px; border-radius: 99px; background: color-mix(in srgb, var(--c) 14%, #fff); color: color-mix(in srgb, var(--c) 75%, #000); }
.gs-foto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .gs-foto span { aspect-ratio: 4 / 3; border-radius: 10px; display: grid; place-items: center; align-content: center; gap: 2px; color: var(--sec); font-size: 18px; } .gs-foto small { font-size: 10.5px; }
/* logistica */
.gs-map { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 12px; }
.gs-map__v { position: relative; border-radius: 18px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08); overflow: hidden; }
.gs-map svg { width: 100%; height: auto; display: block; background: linear-gradient(#f7f9fd, #eef3fb); }
.gs-map .land { fill: #fff; stroke: #cdd2dd; stroke-width: 1.5; }
.gs-map .road { stroke: #d9dde6; stroke-width: 6; stroke-linecap: round; }
.gs-map .route { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 7 7; stroke-linecap: round; animation: dashmove 1.2s linear infinite; }
@keyframes dashmove { to { stroke-dashoffset: -28; } }
.gs-map .node { fill: #fff; stroke: #1d1d1f; stroke-width: 2; } .gs-map .node.hub { fill: #23509f; stroke: #fff; stroke-width: 3; }
.gs-map text { font: 600 11px var(--font); fill: #3a3d46; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.gs-map .truck rect { fill: var(--c); stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25)); } .gs-map .truck text { fill: #fff; stroke: none; font-size: 9px; font-weight: 700; } .gs-map .truck { cursor: pointer; }
.gs-map .truck.is-sel rect { stroke: #1d1d1f; stroke-width: 2.5; }
.gs-map__leg { position: absolute; left: 12px; bottom: 10px; display: flex; gap: 12px; font-size: 11px; color: var(--sec); padding: 5px 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.9); }
.gs-map__leg span { display: inline-flex; align-items: center; gap: 5px; } .gs-map__leg i { width: 9px; height: 9px; border-radius: 3px; } .gs-map__leg i.hub { border-radius: 50%; background: #23509f; } .gs-map__leg i.dash { width: 14px; height: 0; border-top: 2px dashed var(--accent); border-radius: 0; }
.gs-map__s { display: grid; gap: 10px; align-content: start; }
.gs-sel { padding: 14px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c) 55%, transparent), 0 8px 22px rgba(16, 32, 80, 0.08); display: grid; gap: 10px; }
.gs-sel__h { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; } .gs-sel__h small { display: block; color: var(--sec); font-size: 11.5px; } .gs-sel__h b { font: 700 15px var(--font-d); }
.gs-sel__ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--c); color: #fff; font-size: 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.gs-sel__m { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .gs-sel__m > div { padding: 8px 10px; border-radius: 12px; background: var(--fill); } .gs-sel__m small { display: block; color: var(--sec); font-size: 11px; } .gs-sel__m b { font: 600 14px var(--font); font-variant-numeric: tabular-nums; }
.gs-sel__a { display: flex; gap: 6px; flex-wrap: wrap; }
.gs-ship { max-height: 230px; overflow-y: auto; } .gs-ship li { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; cursor: pointer; transition: background-color 150ms; } .gs-ship li i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); } .gs-ship li small { display: block; color: var(--sec); font-size: 11.5px; } .gs-ship li.is-on { background: #fff; box-shadow: 0 0 0 1px var(--c); }
@media (hover: hover) { .gs-ship li:hover { background: rgba(0, 0, 0, 0.04); } }
.gs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.gs-truck { padding: 14px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08); display: grid; gap: 6px; } .gs-truck header { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; } .gs-truck header small { display: block; color: var(--sec); } .gs-truck label { display: flex; justify-content: space-between; font-size: 12px; color: var(--sec); margin-top: 4px; } .gs-truck label b { color: var(--ink); } .gs-truck footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; } .gs-truck footer small { color: var(--ter); }
.gs-truck .gs-bar u { background: var(--c); } .gs-truck .gs-bar.warn u { background: #ff9f0a; }
.gs-heat { display: grid; gap: 5px; } .gs-heat > div { display: grid; grid-template-columns: 20px repeat(8, 1fr); gap: 4px; align-items: center; } .gs-heat b { font: 600 11px var(--mono); color: var(--ter); } .gs-heat span { height: 24px; border-radius: 6px; background: color-mix(in srgb, #23509f calc(var(--v) * 1%), #eef1f7); }
.gs-pick li { display: grid; grid-template-columns: 80px 1fr 40%; gap: 10px; align-items: center; padding: 6px 0; } .gs-pick small { color: var(--sec); } .gs-pick .gs-bar u { background: #30b350; transition: none; }
.gs-dock { position: relative; padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08); display: grid; gap: 8px; }
.gs-dock__h, .gs-dock__r { display: grid; grid-template-columns: 98px 1fr; gap: 12px; align-items: center; }
.gs-dock__h { grid-template-columns: 98px repeat(13, 1fr); gap: 0 0; } .gs-dock__h { padding-right: 0; } .gs-dock__h > span { grid-column: 1; margin-right: 12px; } .gs-dock__h b { font: 500 10.5px var(--mono); color: var(--ter); }
.gs-dock__r > span { font: 600 12.5px var(--font); }
.gs-dock__t { position: relative; display: grid; grid-template-columns: repeat(13, 1fr); height: 36px; border-radius: 10px; background: #f4f5f9; overflow: hidden; }
.gs-dock__t i { border-left: 1px solid rgba(0, 0, 0, 0.05); cursor: pointer; transition: background-color 150ms; } .gs-dock__t i:hover { background: rgba(35, 80, 159, 0.14); }
.gs-dock__t u { position: absolute; top: 4px; bottom: 4px; border-radius: 8px; background: var(--accent); color: #fff; font: 600 11px/28px var(--font); text-decoration: none; padding: 0 8px; white-space: nowrap; overflow: hidden; animation: popin 500ms var(--out); }
.gs-dock__now { position: absolute; top: 8px; bottom: 8px; width: 2px; background: #e5242f; border-radius: 1px; pointer-events: none; }
@media (max-width: 1000px) { .gs { grid-template-columns: 1fr; } .gs-list { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px; } .gs-list__t, .gs-new { display: none; } .gs-site { min-width: 230px; } .gs-grid2, .gs-map { grid-template-columns: 1fr; } .gs-kpis, .gs-kpis--5 { grid-template-columns: repeat(2, 1fr); } .gs-timb li { grid-template-columns: 10px 1fr; } .gs-timb li span, .gs-timb li small { display: none; } .gs-costi > div { grid-template-columns: 70px 1fr 80px; } .gs-costi small { display: none; } }

/* ===== scheda al passaggio, come in Omicron ===== */
.pcard { width: 310px; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 12px 40px rgba(0, 0, 0, 0.14); transform: translate(-50%, calc(-100% - 20px)); }
.pcard.is-below { transform: translate(-50%, 0); }
.pcard .scheda { display: flex; flex-direction: column; gap: 10px; }
.pcard .scheda-testa { display: flex; gap: 12px; align-items: center; }
.pcard .avatar { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: #ebebf0; flex: none; }
.pcard .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard .avatar.vei { border-radius: 14px; background: var(--c); color: #fff; font-size: 26px; }
.pcard .scheda-testo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pcard .scheda-testo b { font: 600 16px/1.25 var(--font); letter-spacing: -0.015em; }
.pcard .scheda-testo small { display: block; color: var(--sec); font-size: 12.5px; margin: 0; }
.pcard .scheda-distintivi { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.pcard .distintivo { padding: 2px 8px; border-radius: 999px; background: #ebebf0; color: var(--sec); font: 600 11px var(--font); font-style: normal; }
.pcard .scheda-adesso { display: flex; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--colore-stato) 14%, #f5f5f7); }
.pcard .stato { flex: 1; display: flex; align-items: center; gap: 7px; font: 600 13px var(--font); }
.pcard .stato i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pcard .stato .tempo { margin-left: auto; padding-left: 8px; font: 500 12px var(--mono); color: var(--sec); }
.pcard .scheda-numeri { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; padding: 0; list-style: none; margin: 0; }
.pcard .scheda-numeri li { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 10px; background: #f5f5f7; }
.pcard .scheda-numeri b { font: 600 20px/1.15 var(--font); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; display: block; }
.pcard .scheda-numeri span { font-size: 11px; line-height: 1.3; color: var(--sec); }
.pcard .scheda-sezione h4 { margin: 0 0 2px; font: 600 11px var(--font); color: var(--ter); }
.pcard .voci-scheda { margin: 0; }
.pcard .voce-scheda { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 4px 0; font-size: 12.5px; line-height: 1.4; margin: 0; }
.pcard .voce-scheda dt { color: var(--sec); display: flex; align-items: center; gap: 7px; }
.pcard .voce-scheda dd { margin: 0; text-align: right; text-wrap: balance; overflow-wrap: anywhere; font-weight: 500; }
.pcard .app-i { display: grid; place-items: center; width: 18px; height: 18px; font-size: 16px; font-style: normal; flex: none; }
.pcard .scheda-piede { margin: 0; padding-top: 8px; border-top: 0.5px solid rgba(0, 0, 0, 0.08); font-size: 11px; color: var(--ter); text-align: center; }
.pcard .scheda-nota { margin: 0; font-size: 12px; color: var(--sec); }

.pcard .voci-scheda { display: block; }
.stage__fail { display: grid; gap: 8px; justify-items: center; text-align: center; max-width: 420px; padding: 0 20px; font-family: var(--font); letter-spacing: 0; }
.stage__fail b { font: 700 18px var(--font-d); color: var(--ink); } .stage__fail p { color: var(--sec); font-size: 13.5px; line-height: 1.45; } .stage__fail code { font: 400 11px var(--mono); color: var(--ter); word-break: break-word; }
.stage__loading:has(.stage__fail) { pointer-events: auto; z-index: 9; }

/* ===== gestione: foglio sopra la scena; schede informative in scena ===== */
.dash { position: absolute; inset: 10px; z-index: 9; border-radius: 22px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 40px 100px rgba(16, 32, 80, 0.3); display: flex; flex-direction: column; overflow: hidden; animation: sheetin 420ms var(--sheet); }
.dash[hidden] { display: none; }
.dash__bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 10px 18px; border-bottom: 1px solid var(--line); background: #fafbfc; }
.dash__bar b { font: 700 15px var(--font-d); letter-spacing: -0.02em; }
.dash__body { flex: 1; min-height: 0; }
.dash__in { height: 100%; }
.gs-att { display: inline-block; padding: 2px 8px; border-radius: 99px; font: 600 11px var(--mono); }
.gs-att.ok { background: #e3f6ea; color: #17803f; } .gs-att.warn { background: #fff1d8; color: #a85a00; } .gs-att.ko { background: #ffe3e5; color: #c20f20; }
.gs-mini { margin-left: 6px; border: 0; background: none; color: var(--accent); font: 600 11px var(--font); cursor: pointer; padding: 2px 4px; }
.gs-perm { display: flex; flex-wrap: wrap; gap: 4px; max-width: 260px; } .gs-perm span { padding: 2px 8px; border-radius: 99px; background: #eef0f5; font-size: 11px; color: #4a515e; }
.gs-mini-map .gs-map__v { border-radius: 14px; box-shadow: none; } .gs-mini-map svg { background: transparent; } .gs-mini-map .gs-map__leg { display: none; }
.pn-gest { width: 100%; justify-content: center; margin-top: 12px; height: 40px; border-radius: 13px; }

.hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; transition: opacity 400ms var(--out); }
.frame.is-inside .hud { opacity: 0; }
.hud-col { position: absolute; top: 56px; display: grid; gap: 10px; align-content: start; width: 300px; max-width: 34%; }
.hud-col--r { right: 14px; } .hud-col--l { left: 14px; top: 56px; }
.hud-card { pointer-events: auto; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(0, 0, 0, 0.09), 0 12px 34px rgba(16, 32, 80, 0.12); font-size: 12.5px; display: grid; gap: 7px; }
.hud-card header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hud-card header b { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px var(--font); } .hud-card header b iconify-icon { font-size: 16px; color: var(--accent); }
.hud-link { border: 0; background: none; color: var(--accent); font: 500 11.5px var(--font); cursor: pointer; padding: 0; }
.hud-live { display: inline-flex; align-items: center; gap: 5px; font: 500 10.5px var(--mono); color: #17803f; text-transform: uppercase; } .hud-live i { width: 6px; height: 6px; border-radius: 50%; background: #30b350; animation: pulse2 2s infinite; }
.hud-card footer { display: flex; justify-content: space-between; gap: 8px; color: var(--sec); font-size: 11.5px; padding-top: 6px; border-top: 1px solid var(--line); } .hud-card footer b { color: var(--ink); } .hud-card footer iconify-icon { vertical-align: -2px; }
.hud-map { padding: 10px; } .hud-map [data-hud-map] { cursor: pointer; }
.hud-row { display: grid; grid-template-columns: 96px 1fr 34px; gap: 8px; align-items: center; } .hud-row span { color: var(--sec); } .hud-row b { text-align: right; font-variant-numeric: tabular-nums; }
.hud-bar { height: 7px; border-radius: 4px; background: #e8eaf0; overflow: hidden; } .hud-bar u { display: block; height: 100%; border-radius: 4px; background: #23509f; transition: width 700ms var(--out); text-decoration: none; } .hud-bar.low u { background: #ff9f0a; }
.hud-site { display: grid; grid-template-columns: 9px 1fr auto; gap: 9px; align-items: center; width: 100%; padding: 8px 9px; border: 0; border-radius: 12px; background: transparent; text-align: left; cursor: pointer; transition: background-color 150ms; }
@media (hover: hover) { .hud-site:hover { background: rgba(0, 0, 0, 0.05); } }
.hud-site i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); } .hud-site b { display: block; font: 600 12.5px var(--font); } .hud-site small { color: var(--sec); font-size: 11px; } .hud-site em { font: 600 11px var(--mono); font-style: normal; color: var(--sec); }
.hud-site.is-on { background: #fff; box-shadow: 0 0 0 1.5px var(--c); }
.hud-line { display: grid; grid-template-columns: 8px 1fr auto; gap: 9px; align-items: center; } .hud-line i { width: 8px; height: 8px; border-radius: 50%; background: #30b350; } .hud-line.warn i { background: #ff9f0a; } .hud-line.ko i { background: #e5242f; box-shadow: 0 0 0 3px rgba(229, 36, 47, 0.18); } .hud-line b { font-size: 12.5px; } .hud-line small { display: block; color: var(--sec); font-size: 11px; } .hud-line em { font: 600 11px var(--mono); font-style: normal; color: var(--sec); }
.hud-who { display: flex; flex-wrap: wrap; gap: 4px; } .hud-who span { padding: 3px 9px; border-radius: 99px; font-size: 11.5px; } .hud-who .on { background: #e3f6ea; color: #17803f; } .hud-who .off { background: #eef0f4; color: #8e8e93; text-decoration: line-through; }
.hud-none { color: var(--sec); }
.hud-read { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; } .hud-read .plate { padding: 2px 8px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1.5px #1d1d1f; font: 700 11.5px var(--mono); letter-spacing: 0.04em; } .hud-read small { color: var(--sec); font-size: 11px; } .hud-read em { font: 600 11px var(--mono); font-style: normal; color: #17803f; } .hud-read time { grid-column: 2 / -1; font: 400 10px var(--mono); color: var(--ter); margin-top: -4px; }
.hud-occ { display: flex; gap: 14px; align-items: center; } .hud-occ b { display: block; font: 700 15px var(--font-d); } .hud-occ small { display: block; color: var(--sec); font-size: 11px; margin-bottom: 4px; }
@media (max-width: 980px) { .hud-col { display: none; } }
.pcard .att { display: inline-block; padding: 1px 8px; border-radius: 99px; font: 600 11px var(--mono); } .pcard .att.ok { background: #e3f6ea; color: #17803f; } .pcard .att.warn { background: #fff1d8; color: #a85a00; } .pcard .att.ko { background: #ffe3e5; color: #c20f20; }
.pcard .perms { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; } .pcard .perms span { padding: 2px 8px; border-radius: 99px; background: #eef0f5; font-size: 11px; color: #4a515e; }
.pcard { transform: none !important; }
.gs-mini-map.gs-map { display: block; }

/* ===== Sezione "Dentro ogni area" + vista amministrazione ===== */
.gs--amm, .gs--log { grid-template-columns: 1fr; position: relative; }
.gs-main--full { height: 100%; }
.gs-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 22px; display: grid; gap: 14px; align-content: start; }
.gs-role { display: inline-flex; padding: 3px; border-radius: 99px; background: var(--fill); gap: 2px; }
.gs-role button { border: 0; height: 28px; padding: 0 12px; border-radius: 99px; background: transparent; font: 500 12px var(--font); color: var(--sec); cursor: pointer; transition: background-color 200ms, color 200ms; }
.gs-role button.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); }
.gs-kpis--6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.gs-tabs button.is-lock { opacity: 0.55; }
.gs-filters { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.gs-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.gs-chips button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: 0; border-radius: 99px; background: var(--fill); font: 500 12px var(--font); color: var(--sec); cursor: pointer; }
.gs-chips button.is-on { background: var(--ink); color: #fff; }
.gs-chips em { font-style: normal; opacity: 0.6; }
.gs-q { height: 30px; width: 220px; max-width: 100%; padding: 0 12px; border: 0; border-radius: 10px; background: var(--fill); font: 13px var(--font); outline: none; }
.gs-q:focus { box-shadow: 0 0 0 2px var(--accent); }
.gs-act { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.gs-empty { text-align: center; color: var(--ter); padding: 24px; }
.gs-table tr.is-new td { animation: rowIn 1.4s var(--out); }
@keyframes rowIn { from { background: #e2eeff; } to { background: transparent; } }
.gs-split { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; align-items: start; }
.gs-clist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gs-clist button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1); text-align: left; cursor: pointer; font: 12.5px var(--font); }
.gs-clist button.is-on { box-shadow: 0 0 0 2px var(--accent); }
.gs-clist span { flex: 1; display: grid; min-width: 0; } .gs-clist b { font-weight: 600; } .gs-clist small { color: var(--ter); } .gs-clist em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--sec); font-size: 12px; }
.gs-clist .dot { width: 9px; height: 9px; border-radius: 50%; background: #30b350; flex: none; } .gs-clist .dot.warn { background: #ff9f0a; } .gs-clist .dot.ko { background: #ff453a; }
.gs-cdet { display: grid; gap: 12px; }
.gs-banca, .gs-scad { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gs-banca li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08); transition: opacity 300ms; }
.gs-banca li.done { opacity: 0.55; }
.gs-banca b, .gs-scad b { font-weight: 600; font-size: 13px; } .gs-banca small, .gs-scad small { display: block; color: var(--ter); font-size: 11.5px; }
.imp { font: 700 14px var(--font-d); font-variant-numeric: tabular-nums; } .imp.in { color: #17803f; } .imp.out { color: #c20f20; }
.gs-banca .match { display: grid; justify-items: end; gap: 2px; } .gs-banca .match em { font-style: normal; font: 700 13px var(--font-d); } .match em.hi { color: #17803f; } .match em.mid { color: #a85a00; }
.gs-scad li { display: grid; grid-template-columns: 78px minmax(0, 1fr) 100px 100px; gap: 12px; align-items: center; padding: 9px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08); }
.gs-scad li.tax { box-shadow: 0 0 0 1.5px #ffd596; }
.gs-scad time { font: 600 13px var(--font-d); } .gs-scad time small { font: 11px var(--font); }
.gs-scad .saldo { text-align: right; font: 500 12.5px var(--font); font-variant-numeric: tabular-nums; color: var(--sec); } .gs-scad .saldo.low { color: #c20f20; font-weight: 700; }
.gs-locked { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 60px 20px; color: var(--sec); } .gs-locked iconify-icon { font-size: 34px; color: var(--ter); } .gs-locked b { color: var(--ink); font-size: 16px; } .gs-locked p { max-width: 46ch; }
.gs-toast { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 10px 16px; border-radius: 99px; background: var(--ink); color: #fff; font: 500 13px var(--font); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5); z-index: 5; max-width: calc(100% - 32px); }
.gs-toast[hidden] { display: none; } .gs-toast.is-in { animation: toastIn 360ms var(--out); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px); } }
@media (max-width: 900px) { .gs-kpis--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gs-split { grid-template-columns: 1fr; } .gs-banca li { grid-template-columns: 1fr auto; } .gs-scad li { grid-template-columns: 64px 1fr auto; } .gs-scad .saldo { display: none; } .gs-table { display: block; overflow-x: auto; } .gs-head { padding-inline: 12px; } }

/* ===== Help desk ===== */
.hd-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.hd-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.hd-list button { width: 100%; display: grid; grid-template-columns: 6px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 12px 9px 8px; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1); text-align: left; cursor: pointer; font: 12.5px var(--font); transition: transform 140ms var(--out); }
.hd-list button:active { transform: scale(0.99); } .hd-list button.is-on { box-shadow: 0 0 0 2px var(--accent); }
.hd-m { display: grid; min-width: 0; } .hd-m b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hd-m small { color: var(--ter); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-p { align-self: stretch; border-radius: 3px; background: #c9ccd4; } .hd-p--alta { background: #ff453a; } .hd-p--media { background: #ff9f0a; }
.hd-av { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font: 700 11px var(--font); } .hd-av--n { background: #c9ccd4; }
.hd-det { display: grid; gap: 10px; position: sticky; top: 0; }
.hd-ogg { font: 600 16px var(--font-d); letter-spacing: -0.02em; margin: 0; }
.hd-sla { display: grid; gap: 4px; font-size: 11.5px; color: var(--sec); } .hd-sla i { display: block; height: 7px; border-radius: 4px; background: #e8eaf0; overflow: hidden; } .hd-sla u { display: block; height: 100%; border-radius: 4px; transition: width 500ms var(--out); }
.hd-chat { display: grid; gap: 6px; max-height: 150px; overflow-y: auto; }
.hd-msg { max-width: 86%; padding: 8px 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.4; background: #f1f2f6; } .hd-msg--op { justify-self: end; background: var(--accent); color: #fff; animation: toastIn 360ms var(--out); }
.hd-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.hd-ops { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.hd-oh { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .hd-oh .hd-av { width: 34px; height: 34px; font-size: 14px; } .hd-oh b { display: block; } .hd-oh small { color: var(--ter); }
.hd-bar { height: 8px; border-radius: 4px; background: #e8eaf0; overflow: hidden; } .hd-bar u { display: block; height: 100%; border-radius: 4px; transition: width 500ms var(--out); }
.hd-ostat { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11.5px; color: var(--sec); } .hd-ostat b { color: var(--ink); font-size: 14px; margin-right: 3px; }
.hd-chart { display: flex; gap: 8px; align-items: flex-end; height: 150px; } .hd-col { flex: 1; display: grid; gap: 4px; text-align: center; color: var(--ter); font-size: 11px; } .hd-b { height: 120px; display: flex; align-items: flex-end; justify-content: center; gap: 3px; } .hd-b u { width: 38%; border-radius: 4px 4px 0 0; }
@media (max-width: 900px) { .hd-split { grid-template-columns: 1fr; } .hd-list button { grid-template-columns: 6px minmax(0, 1fr) auto; } .hd-list button .hd-av { display: none; } }

/* ===== Sviluppo e progetti ===== */
.sv-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: start; }
.sv-col { display: grid; gap: 8px; padding: 10px; border-radius: 16px; background: #f5f6f9; align-content: start; min-height: 120px; }
.sv-col h4 { margin: 0; font: 600 12px var(--font); display: flex; justify-content: space-between; color: var(--sec); } .sv-col h4 em { font-style: normal; color: var(--ter); }
.sv-card { display: grid; gap: 4px; padding: 10px 11px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1); animation: rowIn 1.2s var(--out); }
.sv-card b { font: 600 12.5px var(--font); } .sv-card small { color: var(--ter); font-size: 11px; }
.sv-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .sv-foot .gs-btn { margin-left: auto; }
.sv-p { display: inline-flex; align-items: center; gap: 5px; font: 500 11px var(--font); color: var(--sec); } .sv-p::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.sv-h { margin: 4px 0 0; font: 600 13px var(--font); }
.sv-dep { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; } .sv-dep .gs-card { display: grid; gap: 4px; justify-items: start; } .sv-dep small { color: var(--ter); }
.sv-perm { border: 0; cursor: pointer; text-transform: capitalize; transition: transform 140ms var(--out); } .sv-perm:active { transform: scale(0.94); }
@media (max-width: 900px) { .sv-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Contratti e firme ===== */
.fr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fr-list li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 11px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1); }
.fr-list li.is-new { animation: rowIn 1.4s var(--out); }
.fr-m { display: grid; min-width: 0; } .fr-m b { font-weight: 600; font-size: 13px; } .fr-m small { color: var(--ter); }
.fr-s { display: flex; gap: 5px; flex-wrap: wrap; } .fr-p { padding: 3px 9px; border-radius: 99px; background: var(--fill); font-size: 11.5px; color: var(--sec); } .fr-p.ok { background: #e3f6ea; color: #17803f; }
@media (max-width: 900px) { .fr-list li { grid-template-columns: 1fr auto; } .fr-s { grid-column: 1 / -1; } }

/* ===== Persone e turni ===== */
.pt-grid { display: grid; grid-template-columns: 150px repeat(7, minmax(0, 1fr)); gap: 5px; align-items: stretch; overflow-x: auto; }
.pt-h { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ter); text-align: center; padding: 2px 0; }
.pt-n { display: flex; align-items: center; gap: 8px; font-size: 12px; } .pt-n span { display: grid; min-width: 0; } .pt-n b { font-weight: 600; } .pt-n small { color: var(--ter); }
.pt-c { display: grid; gap: 1px; justify-items: center; align-content: center; min-height: 40px; border: 0; border-radius: 10px; font: 600 11.5px var(--font); color: var(--ink); cursor: pointer; transition: transform 140ms var(--out); }
.pt-c small { font-weight: 400; color: var(--sec); font-size: 10.5px; } .pt-c:active { transform: scale(0.94); }
@media (max-width: 900px) { .pt-grid { grid-template-columns: 110px repeat(7, 62px); } }