/* Centre de control de l'empresa d'agents. Fosc, com la pàgina de la recerca. */
:root {
  color-scheme: dark;
  --bg: #07080b; --bg2: #0d0f14; --card: #12151c; --card2: #181c25; --line: #252a35; --line2: #323848;
  --ink: #f4f6fa; --soft: #c9cfdb; --muted: #9aa2b2;
  --accent: #8b96ff; --go: #3ddc97; --wait: #ffc24b; --no: #ff6f6f;
  --go-bg: rgba(61, 220, 151, .12); --wait-bg: rgba(255, 194, 75, .12); --no-bg: rgba(255, 111, 111, .12); --acc-bg: rgba(139, 150, 255, .14);
  --display: "Unbounded", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;
  --pixel: "Pixelify Sans", "Inter", system-ui, sans-serif;
  --r: 18px;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased }
body { scrollbar-color: #2c3240 var(--bg) }
::selection { background: var(--accent); color: #07080b }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px }
button { font: inherit; color: inherit; cursor: pointer }
h1, h2, h3 { margin: 0; font-family: var(--display); letter-spacing: -.02em; line-height: 1.15 }
p { margin: 0 }
.wrap { max-width: 88rem; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }

/* Entrada */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(50rem 26rem at 80% -10%, rgba(91, 103, 245, .25), transparent 60%), var(--bg) }
.login form { width: min(26rem, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 2rem; display: flex; flex-direction: column; gap: 1rem }
.login h1 { font-size: 1.6rem }
.login p { color: var(--soft) }
.login input { font: inherit; background: var(--bg2); color: var(--ink); border: 1px solid var(--line2); border-radius: 12px; padding: .8rem 1rem }
.login .err { color: var(--no); font-size: .92rem; min-height: 1.3em }
.btn { background: var(--ink); color: #07080b; border: 0; border-radius: 99px; padding: .7rem 1.2rem; font-weight: 700 }
.btn.ghost { background: transparent; color: var(--soft); border: 1px solid var(--line2) }
.btn.small { padding: .4rem .8rem; font-size: .88rem }
.btn:disabled { opacity: .5; cursor: default }

/* Capçalera */
header.top { position: sticky; top: 0; z-index: 30; background: rgba(7, 8, 11, .95); border-bottom: 1px solid var(--line) }
header.top .wrap { display: flex; align-items: center; gap: 1rem; padding-block: .7rem; flex-wrap: wrap }
.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--display); font-weight: 800; font-size: 1.05rem; white-space: nowrap }
.brand img { width: 28px; height: 28px; image-rendering: pixelated }
nav.tabs { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0 }
nav.tabs button { background: transparent; border: 0; color: var(--muted); font-weight: 600; font-size: .92rem; padding: .45rem .85rem; border-radius: 99px; white-space: nowrap; display: inline-flex; gap: .4rem; align-items: center }
nav.tabs button:hover { color: var(--ink); background: var(--card) }
nav.tabs button[aria-selected="true"] { color: #07080b; background: var(--ink) }
.badge { background: var(--wait); color: #07080b; border-radius: 99px; font-size: .72rem; font-weight: 800; padding: 0 .45rem; line-height: 1.3rem; min-width: 1.3rem; text-align: center }
.right { display: flex; gap: .5rem; align-items: center }
.pausa { display: inline-flex; align-items: center; gap: .5rem; border-radius: 99px; padding: .45rem .9rem; font-weight: 700; font-size: .88rem; border: 1px solid var(--line2); background: var(--card) }
.pausa .led { width: .6rem; height: .6rem; border-radius: 50%; background: var(--go); box-shadow: 0 0 0 0 rgba(61, 220, 151, .6); animation: led 1.8s ease-out infinite }
.pausa.off .led { background: var(--no); animation: none }
@keyframes led { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 151, .55) } 100% { box-shadow: 0 0 0 9px rgba(61, 220, 151, 0) } }

main { padding-block: 1.4rem 4rem }
.view-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap }
.view-title h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem) }
.view-title p { color: var(--muted); font-size: .95rem }

/* Oficina */
.office-grid { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1rem; align-items: start }
@media (max-width: 1100px) { .office-grid { grid-template-columns: 1fr } }
.stage { position: relative; background: #0b0d13; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: 0 30px 80px -40px rgba(91, 103, 245, .45) }
.stage canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; image-rendering: crisp-edges }
.tags { position: absolute; inset: 0; pointer-events: none }
.tag { position: absolute; transform: translate(-50%, -100%); font-family: var(--pixel); font-size: clamp(9px, 1.05vw, 13px); font-weight: 600; white-space: nowrap; padding: 1px 6px 2px; border-radius: 6px; background: rgba(7, 8, 11, .82); color: var(--ink); border: 1px solid rgba(255, 255, 255, .08) }
.tag b { font-weight: 600; margin-right: .3em }
.tag.off { color: var(--muted); opacity: .75 }
.bubble { position: absolute; transform: translate(-50%, -100%); max-width: 15rem; font-size: clamp(10px, 1vw, 12.5px); line-height: 1.35; background: var(--ink); color: #07080b; border-radius: 10px; padding: .4rem .6rem; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .6); animation: pop .25s cubic-bezier(.2, .9, .3, 1.3) }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: var(--ink); transform: translateX(-50%) rotate(45deg) }
.bubble b { display: block; font-size: .85em; color: #3a43c9 }
@keyframes pop { from { transform: translate(-50%, -90%) scale(.8); opacity: 0 } }
.room-label { position: absolute; font-family: var(--pixel); font-size: clamp(9px, 1vw, 12px); color: rgba(255, 255, 255, .55); letter-spacing: .04em; text-transform: uppercase }
.legend { display: flex; flex-wrap: wrap; gap: .9rem; padding: .7rem 1rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--soft); background: var(--bg2) }
.legend span { display: inline-flex; align-items: center; gap: .4rem }
.dot { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; flex: none }

.side { display: flex; flex-direction: column; gap: 1rem }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden }
.panel h3 { font-family: var(--body); font-size: .95rem; font-weight: 700; padding: .85rem 1rem; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center }
.panel .body { padding: .8rem 1rem; display: flex; flex-direction: column; gap: .7rem }
.feed { max-height: 26rem; overflow-y: auto }
.empty { color: var(--muted); font-size: .92rem; padding: .4rem 0 }

/* Missatges */
.msg { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .65rem }
.av { width: 2.2rem; height: 2.2rem; border-radius: 10px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: .72rem; color: #07080b; flex: none }
.msg .who { font-size: .82rem; font-weight: 700; display: flex; gap: .4rem; flex-wrap: wrap; align-items: baseline }
.msg .who .to { color: var(--muted); font-weight: 500 }
.msg .who time { color: var(--muted); font-weight: 500; font-size: .78rem; margin-left: auto }
.msg .txt { background: var(--card2); border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; padding: .5rem .7rem; color: var(--soft); font-size: .93rem; margin-top: .2rem; white-space: pre-wrap; overflow-wrap: anywhere }
.msg.sys .txt { background: var(--acc-bg); border-color: rgba(139, 150, 255, .3) }
.msg.tu .txt { background: var(--go-bg); border-color: rgba(61, 220, 151, .35) }
.chatlist { display: flex; flex-direction: column; gap: .9rem }
.filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem }
.chip { background: var(--card); border: 1px solid var(--line); border-radius: 99px; padding: .35rem .75rem; font-size: .85rem; font-weight: 600; color: var(--soft); display: inline-flex; gap: .4rem; align-items: center }
.chip[aria-pressed="true"] { background: var(--ink); color: #07080b; border-color: var(--ink) }

/* Decisions */
.dec { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .6rem }
.dec.pend { border-color: rgba(255, 194, 75, .5); background: linear-gradient(180deg, rgba(255, 194, 75, .07), var(--card)) }
.dec .q { font-weight: 700 }
.dec .d { color: var(--soft); font-size: .93rem; white-space: pre-wrap }
.dec .meta { color: var(--muted); font-size: .82rem }
.dec .opts { display: flex; gap: .5rem; flex-wrap: wrap }
.list { display: flex; flex-direction: column; gap: .8rem }

/* Columnes (idees i tasques) */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); gap: .8rem; overflow-x: auto; padding-bottom: .6rem }
.col { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: .7rem; display: flex; flex-direction: column; gap: .6rem; min-height: 8rem }
.col h3 { font-family: var(--body); font-size: .85rem; font-weight: 700; color: var(--soft); display: flex; justify-content: space-between; padding: .1rem .2rem }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .75rem .85rem; display: flex; flex-direction: column; gap: .35rem }
.card .t { font-weight: 700; font-size: .95rem; line-height: 1.35 }
.card .s { color: var(--soft); font-size: .88rem }
.card .m { color: var(--muted); font-size: .8rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center }
.note { font-family: var(--display); font-weight: 800; font-size: .85rem; padding: .1rem .5rem; border-radius: 8px }
.n-go { background: var(--go-bg); color: var(--go) } .n-wait { background: var(--wait-bg); color: var(--wait) } .n-no { background: var(--no-bg); color: var(--no) }
.pro { color: var(--go); font-size: .84rem } .con { color: var(--no); font-size: .84rem }
details.more summary { cursor: pointer; color: var(--muted); font-size: .82rem }

/* Equip */
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .8rem }
.member { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: start }
.member.off { opacity: .6 }
.member .n { font-weight: 700 }
.member .r { color: var(--soft); font-size: .9rem }
.member .st { font-size: .82rem; margin-top: .3rem; display: inline-flex; align-items: center; gap: .4rem; color: var(--muted) }

/* Diners */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1.2rem }
@media (max-width: 800px) { .kpis { grid-template-columns: 1fr 1fr } }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem }
.kpi b { display: block; font-family: var(--display); font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.kpi span { color: var(--muted); font-size: .85rem }
table { width: 100%; border-collapse: collapse; font-size: .92rem }
th, td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--line) }
th { color: var(--muted); font-weight: 600; font-size: .82rem }
td.n { text-align: right; font-variant-numeric: tabular-nums }
.tbl { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r) }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: #07080b; font-weight: 700; padding: .7rem 1.1rem; border-radius: 99px; z-index: 50; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6) }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }