/* L'ufficio 3D degli agenti (pagina /ufficio) */
:where(.uf){--ink:#0b1022;--ink-2:#121a36;--ink-3:#1b2650;--line:rgba(160,180,255,.16);--paper:#eef1ff;--muted:#98a3d3;--blu:#2F55E4;--arancio:#E85A16;--live:#E5263B;--ok:#34d399;--prova:#fbbf24;--display:"Archivo",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace}
.uf-fondo{color:#eef1ff;padding-block:28px 48px;background:radial-gradient(1200px 600px at 70% -10%,rgba(47,85,228,.22),transparent 60%),radial-gradient(900px 500px at 0% 0%,rgba(232,90,22,.12),transparent 60%),#0b1022}
.uf{color-scheme:dark;font-family:var(--display);font-size:15px;line-height:1.5;display:grid;gap:18px}
.uf a{color:#ff9a5c}
.uf /* Layout: a 3D isometric office fills a wide stage; the agent sheet floats on the right (below on phones); diary and to-do sit underneath. One deliberate night-ink look,.uf matching davidedurazzi.it. */

.wrap{max-width:1240px;margin:0 auto;display:grid;gap:18px}
.uf header{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:14px}
.uf .eyebrow{font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--arancio);margin:0 0 6px}
.uf h1{font-weight:850;font-stretch:118%;font-size:clamp(28px,5vw,52px);line-height:1;margin:0;letter-spacing:-.01em;text-wrap:balance}
.uf h1 em{font-style:normal;background:linear-gradient(90deg,#ff8a3d,var(--arancio));-webkit-background-clip:text;background-clip:text;color:transparent}
.uf .sub{color:var(--muted);margin:8px 0 0;max-width:60ch}
.uf .orologio{font-family:var(--mono);text-align:right;color:var(--muted);font-size:12px}
.uf .orologio b{display:block;font:600 30px var(--mono);color:var(--paper);font-variant-numeric:tabular-nums}
.uf .scena{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#0e1530;box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.uf #ufTela{display:block;width:100%;height:clamp(440px,68vh,760px);cursor:grab;touch-action:none}
.uf #ufTela:active{cursor:grabbing}
.uf .etichette{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.uf .et{position:absolute;transform:translate(-50%,-100%);white-space:nowrap;font:600 12px var(--display);padding:4px 9px;border-radius:999px;background:rgba(11,16,34,.82);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .2s}
.uf .et.on{opacity:1}
.uf .et.rep{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.92;background:rgba(11,16,34,.6)}
.uf .et.sel{background:var(--arancio);border-color:transparent;color:#fff}
.uf .et .z{color:var(--muted);font-weight:400;margin-left:4px}
.uf .hud{position:absolute;left:12px;right:12px;bottom:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;pointer-events:none}
.uf .hud>*{pointer-events:auto}
.uf button{font:600 13px var(--display);color:var(--paper);background:rgba(18,26,54,.78);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:8px 14px;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .15s,border-color .15s}
.uf button:hover{border-color:rgba(255,255,255,.4)}
.uf button:focus-visible{outline:2px solid var(--arancio);outline-offset:2px}
.uf button[aria-pressed="true"]{background:var(--blu);border-color:var(--blu)}
.uf .aiuto{margin-left:auto;font:400 12px var(--mono);color:rgba(238,241,255,.7);background:rgba(11,16,34,.55);padding:6px 10px;border-radius:8px}
.uf .scheda{position:absolute;top:12px;right:12px;width:min(340px,calc(100% - 24px));background:rgba(12,18,40,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:16px 18px;display:grid;gap:10px;max-height:calc(100% - 80px);overflow:auto;transform:translateX(calc(100% + 24px));opacity:0;pointer-events:none;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s;box-shadow:0 20px 60px -20px rgba(0,0,0,.8)}
.uf .scheda.aperta{transform:none;opacity:1;pointer-events:auto}
.uf .scheda .x{position:absolute;top:10px;right:10px;width:30px;height:30px;padding:0;border-radius:50%;font-size:16px;line-height:1;display:grid;place-items:center}
.uf .suggerimento{position:absolute;top:14px;right:14px;font:400 12px var(--mono);color:rgba(238,241,255,.75);background:rgba(11,16,34,.55);padding:6px 10px;border-radius:8px;pointer-events:none;transition:opacity .3s}
.uf .suggerimento.via{opacity:0}
.uf .adesso{position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:9px;max-width:min(62%,460px);font:500 13px var(--display);color:var(--paper);background:rgba(11,16,34,.72);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:7px 12px 7px 10px;border-radius:999px;opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s;pointer-events:none}
.uf .adesso.on{opacity:1;transform:none}
.uf .adesso i{width:8px;height:8px;border-radius:50%;background:var(--arancio);box-shadow:0 0 0 0 rgba(232,90,22,.6);animation:uf-pulsa 1.6s ease-out infinite;flex:none}
.uf .adesso span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes uf-pulsa{0%{box-shadow:0 0 0 0 rgba(232,90,22,.6)}100%{box-shadow:0 0 0 9px rgba(232,90,22,0)}}
.uf .scena::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 60%,rgba(5,8,20,.45) 100%)}
.uf .etichette,.uf .scheda,.uf .suggerimento,.uf .adesso,.uf .hud{z-index:1}
.uf .scheda h2{font-weight:800;font-stretch:112%;font-size:22px;margin:0;line-height:1.15}
.uf .reparto{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.uf .reparto i{width:10px;height:10px;border-radius:3px;display:inline-block}
.uf .pill{display:inline-block;font:600 11px var(--mono);letter-spacing:.06em;padding:3px 9px;border-radius:999px;color:#0b1022}
.uf .pill.attivo{background:var(--ok)}
.uf .pill.prova{background:var(--prova)}
.uf .pill.capo{background:var(--arancio);color:#fff}
.uf .pill.umano{background:var(--paper)}
.uf dl{margin:0;display:grid;gap:9px}
.uf dt{font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.uf dd{margin:2px 0 0}
.uf .oggi{background:rgba(232,90,22,.12);border:1px solid rgba(232,90,22,.35);padding:9px 11px;border-radius:10px}
.uf .vuoto{color:var(--muted);font-style:italic}
@media (max-width:760px){.uf .scena{display:flex;flex-direction:column}
.uf #ufTela{height:min(62vw,420px)}
.uf .hud{position:static;padding:10px 12px;order:2}
.uf .scheda{position:fixed;top:auto;left:0;right:0;bottom:0;width:auto;max-height:70vh;border-radius:18px 18px 0 0;border-width:1px 0 0;transform:translateY(105%);padding-bottom:max(18px,env(safe-area-inset-bottom,0px));z-index:30}
.uf .suggerimento{display:none}
.uf .adesso{top:calc(min(62vw,420px) - 46px);bottom:auto;left:10px;max-width:calc(100% - 20px);font-size:12px;transform:translateY(6px)}.uf .adesso.on{transform:none}
.uf .etichette{height:min(62vw,420px);inset:auto 0 auto 0;top:0}
.uf .aiuto{display:none}
}
.uf .basso{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:16px}
.uf .box{background:rgba(18,26,54,.6);border:1px solid var(--line);border-radius:16px;padding:18px;min-width:0}
.uf .box h3{font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px;color:var(--muted)}
.uf ul.lista{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.uf ul.lista li{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:start}
.uf .ora{font:400 12px var(--mono);color:var(--muted);padding-top:2px;font-variant-numeric:tabular-nums}
.uf .chi{font-weight:700;color:#ff9a5c}
.uf .todo li{grid-template-columns:14px 1fr}
.uf .todo li::before{content:"";width:10px;height:10px;border-radius:50%;margin-top:6px;background:var(--live);box-shadow:0 0 0 4px rgba(229,38,59,.18)}
.uf .todo li.ok::before{background:var(--prova);box-shadow:0 0 0 4px rgba(251,191,36,.18)}
.uf .legenda{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--muted)}
.uf .legenda span{display:inline-flex;align-items:center;gap:6px}
.uf .legenda i{width:10px;height:10px;border-radius:3px}
.uf footer{color:var(--muted);font-size:12px}
@media (prefers-reduced-motion:reduce){.uf .scheda{transition:none}.uf .adesso i{animation:none}
}
/* intro: la scena entra da sola, i comandi compaiono dopo */
.uf .scena .hud,.uf .scena .etichette,.uf .scena .suggerimento,.uf .scena .adesso,.uf .scena .legenda{transition:opacity .8s ease}
.uf .scena.intro .hud,.uf .scena.intro .etichette,.uf .scena.intro .suggerimento{opacity:0}
.uf .scena.intro::before{content:"";position:absolute;inset:0;background:#070b18;animation:uf-apri 1.4s ease-out forwards;pointer-events:none;z-index:2}
@keyframes uf-apri{from{opacity:1}to{opacity:0}}
.uf .scena.pronta .hud{animation:uf-sali .6s cubic-bezier(.2,.8,.2,1)}
@keyframes uf-sali{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.uf .scena.intro::before,.uf .scena.pronta .hud{animation:none}}
.uf .errore{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:var(--muted)}