:root{color-scheme:dark;--bg:#0c1825;--panel:#132333;--line:#263b4c;--text:#eff4f6;--muted:#98acbc;--blue:#69c6f2}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}button,input,select{font:inherit}button{background:#192d3f;border:1px solid #30495b;color:var(--text);border-radius:10px;padding:9px 13px;cursor:pointer;transition:.2s}button:hover{background:#294458;border-color:#69c6f2}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:3px}button:disabled{opacity:.5;cursor:wait}header{height:85px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:5;background:#0c1928}.brand{display:flex;gap:14px;align-items:center}.mark{font-size:53px;color:#63d0ff;font-weight:900;line-height:1}.brand strong{font-size:20px;letter-spacing:2px}.brand strong span{font-weight:350;color:#b6c8d6;font-size:16px}.brand i{color:#39546a;font-style:normal;margin:0 6px}.brand small{display:block;font-size:9px;letter-spacing:2px;color:var(--muted);margin-top:3px}.top-controls{display:flex;align-items:center;gap:9px}#clock{font-size:22px;font-variant-numeric:tabular-nums;margin-right:12px}.badge{font-size:12px;border:1px solid #476c69;color:#91d5b8;background:#19382f;border-radius:30px;padding:7px 12px}.badge.warn{color:#e8bc77;background:#362f22;border-color:#69583d}main{height:calc(100dvh - 85px);min-height:650px;display:grid;grid-template-columns:minmax(0,1fr) 325px}.viewport{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#2c4051 0,#172837 55%,#0e1c29 100%)}canvas{width:100%;height:100%;display:block;touch-action:none}.scene-heading{position:absolute;left:32px;top:23px;pointer-events:none}.scene-heading small{color:#84bdd5;font-size:10px;letter-spacing:3px}.scene-heading h1{font-size:25px;font-weight:450;margin:4px 0}.scene-heading p{color:#9fb3c2;font-size:12px;margin:0}.zoom{position:absolute;right:20px;bottom:55px;display:flex;gap:4px}.scene-footer{position:absolute;bottom:0;width:100%;padding:13px 22px;background:#0c1928c9;display:flex;justify-content:space-between;font-size:10px;color:#a8bdce;gap:20px}.dot{display:inline-block;width:6px;height:6px;background:#85d1a5;border-radius:50%;margin-right:8px}aside{background:var(--panel);border-left:1px solid var(--line);padding:0 20px;overflow:auto;display:flex;flex-direction:column}nav{display:flex;gap:20px;padding:12px 0 0;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:3}nav button{background:none;border:0;border-bottom:2px solid transparent;border-radius:0;color:#94a9ba;padding:12px 0}nav button.active{color:#f1f6fa;border-color:#79c8e8}.section-title{display:flex;justify-content:space-between;align-items:center;margin:22px 0 12px}.section-title h2{font-size:13px;margin:0;font-weight:500}.section-title span{font-size:11px;color:var(--muted)}.person{display:flex;text-align:left;align-items:center;width:100%;padding:10px 8px;margin-bottom:6px;background:#182c3c;border-color:transparent;gap:12px}.person.selected{background:#223b4e;border-color:#54788e}.avatar{width:40px;height:46px;border-radius:10px;background-image:url('assets/team.png');background-size:160px 230px;background-color:#2c4553;flex:none}.person strong{display:block;font-size:13px}.person small{display:block;font-size:10px;color:#a1b5c5}.person .state{font-size:10px;color:#c3d3df;overflow:hidden;max-width:180px;text-overflow:ellipsis;white-space:nowrap}.person .status-dot{margin-left:auto;width:5px;height:5px;border-radius:50%;background:#74bf9e}#detail{background:#0f202e;border:1px solid #345267;border-radius:12px;padding:14px;margin-top:14px}#detail:empty{display:none}#detail h3{margin:0 0 5px;font-size:15px}#detail p{font-size:12px;color:#b5c5d0;margin:6px 0}#detail select{max-width:100%;width:100%;background:#1a3346;border:1px solid #3a5367;border-radius:7px;color:white;padding:8px;margin:8px 0}#detail button{width:100%;font-size:12px}.meter{height:4px;background:#2c4354;border-radius:3px;margin:10px 0}.meter div{height:100%;background:#88c7b1;border-radius:3px}.incident{background:#25303a;border-left:2px solid #deae62;padding:13px;border-radius:0 10px 10px 0;margin-bottom:10px}.incident strong{display:block;font-size:12px}.incident small{color:#b7c2c9;font-size:10px}.incident.done{border-color:#83bba6;opacity:.65}.empty{color:#93aaba;font-size:12px;padding:12px 0}.wide{width:100%;font-size:12px;background:transparent}.hint{font-size:10px;color:#8da4b5}aside footer{margin-top:auto;padding:22px 0 16px;display:flex;flex-direction:column;gap:5px;color:#859fb1;font-size:10px}#feed article{border-left:1px solid #395063;margin:0 0 0 3px;padding:0 0 20px 15px}#feed article small{color:#74bcd8;font-size:10px}#feed article p{margin:5px 0 0;color:#c6d3dc;font-size:12px}#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.label{position:absolute;transform:translate(-50%,0);padding:3px 8px;border-radius:5px;background:#0b1a29de;color:#ecf3f8;font-size:10px;border:1px solid #3c5568;white-space:nowrap}.bubble{position:absolute;transform:translate(-50%,-100%);background:#faf8f2;color:#233442;max-width:200px;width:max-content;border-radius:13px;padding:9px 12px;box-shadow:0 5px 15px #0003;font-size:12px;line-height:1.35}.bubble:after{content:'';position:absolute;bottom:-7px;left:45%;border-left:7px solid transparent;border-right:7px solid transparent;border-top:8px solid #faf8f2}.bubble.hidden{display:none}dialog{border:1px solid #38576d;border-radius:18px;background:#152b3c;color:#eef5fa;padding:32px;max-width:460px;width:calc(100% - 35px);box-shadow:0 30px 80px #0007}dialog::backdrop{background:#06121cbb;backdrop-filter:blur(6px)}dialog small{letter-spacing:2px;font-size:10px;color:#8bc5e0}dialog h2{font-size:29px;font-weight:450;margin:12px 0}dialog p{font-size:13px;color:#b7cad8}.close{float:right;margin-top:-17px;margin-right:-15px;padding:3px 10px}.primary{background:#65badf;color:#0c2537;font-weight:600;width:100%;margin-top:12px}.primary:hover{background:#97dafa}input{width:100%;padding:12px;background:#0d202e;border:1px solid #476175;color:white;border-radius:8px;margin:7px 0}hr{border:0;border-top:1px solid #3a5060;margin:24px 0}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#eef5f6;color:#183142;padding:13px 23px;border-radius:12px;box-shadow:0 6px 40px #0008;z-index:20;max-width:90vw}#loginError,#aiError{color:#f2b28c}body.offline #connection{color:#efb17d}@media(max-width:1050px){header{padding:0 16px}.brand strong{font-size:17px}.brand strong span{font-size:12px}main{grid-template-columns:minmax(0,1fr) 280px}aside{padding:0 14px}.scene-footer span:last-child{display:none}.scene-heading h1{font-size:21px}}@media(max-width:760px){header{height:auto;min-height:100px;flex-wrap:wrap;padding:10px 16px;gap:8px}.brand small{display:none}.mark{font-size:36px}.top-controls{width:100%;justify-content:flex-end}#clock{font-size:17px;margin-right:auto}.badge{font-size:10px}main{display:block;height:auto}.viewport{height:65dvh;min-height:490px}aside{border-left:0;border-top:1px solid var(--line);padding:0 18px}.scene-heading{left:18px;top:15px}.scene-heading p{max-width:220px}.bubble{font-size:10px;max-width:150px}.label{font-size:9px}#roster{display:grid;grid-template-columns:1fr 1fr;gap:5px}.person{padding:7px}.person .state{max-width:90px}.avatar{width:30px}aside footer{margin-top:15px}nav{position:static}}

/* Oficina Viva 0.2 · música, reloj ambiental y escritorios dinámicos */
.clock-stack{display:flex;flex-direction:column;align-items:center;gap:0;margin-right:8px;min-width:70px}
#clock{font-size:23px;line-height:1.15;margin:0;font-weight:550}
#dayState{font-size:9px;letter-spacing:1.6px;color:#e6c58a;white-space:nowrap}
#music.playing{background:#1a4d47;border-color:#69c5ad;color:#bdf5da}
.volume{display:flex;align-items:center;gap:6px;color:#a7c2d3;font-size:9px;letter-spacing:1px}
.volume input{margin:0;padding:0;width:72px;accent-color:#88d2dc;height:16px;background:transparent;border:0}
.desk-control{margin-top:9px;background:#153b40;border-color:#34777d!important;color:#b4e5d7}
.ai-plan{max-height:158px;overflow:auto;background:#0d202d;border-radius:10px;padding:4px 12px;margin:8px 0}
.ai-plan:empty{display:none}.ai-plan p{font-size:11px;line-height:1.3;margin:7px 0}
@media(max-width:1180px){.volume span{display:none}.volume input{width:50px}.top-controls{gap:5px}.brand strong{font-size:17px}}
@media(max-width:760px){.top-controls{flex-wrap:wrap}.volume input{width:65px}.clock-stack{margin-right:auto}.top-controls button{padding:7px 10px}}