/* Relleu Chat — consola SAC */
:root{
  --ink:#0B2240; --muted:#5B6E85; --bg:#F4F8FC; --surface:#fff; --line:#DCE6F0; --line2:#EAF0F7;
  --pri:#0E528F; --pri-ink:#fff; --acc:#1AA6D4; --tint:#E6F0FA; --sel:#EAF3FC;
  --ok:#2E9E6B; --warn:#D99A00; --crit:#D64545; --note:#FFF6D6; --note-line:#E8D48A;
  --me:#0E528F; --me-ink:#fff; --them:#EEF3F9; --shadow:0 8px 28px rgba(11,34,64,.14);
  --r:10px; --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --ink:#E6EEF8; --muted:#93A6BE; --bg:#0A1626; --surface:#0F2038; --line:#1E3556; --line2:#172B47;
  --pri:#3FB6E0; --pri-ink:#06213A; --acc:#3FB6E0; --tint:#12304F; --sel:#143154;
  --note:#3A3316; --note-line:#6B5C1E; --me:#1C5E97; --me-ink:#fff; --them:#16294A; --shadow:0 8px 28px rgba(0,0,0,.5);
}}
*{box-sizing:border-box} html,body{height:100%;margin:0}
body{font:14px/1.45 var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--pri)} h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}
h1{font-size:20px} h2{font-size:16px} h3{font-size:14px}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--muted)} .small{font-size:12px} .num{font-variant-numeric:tabular-nums}

/* botons i camps */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 12px;cursor:pointer;text-decoration:none;color:var(--ink);font-weight:550;white-space:nowrap}
.btn:hover{background:var(--tint)} .btn:disabled{opacity:.5;cursor:default}
.btn.pri{background:var(--pri);border-color:var(--pri);color:var(--pri-ink)} .btn.pri:hover{filter:brightness(1.08)}
.btn.ghost{border-color:transparent;background:transparent} .btn.ghost:hover{background:var(--tint)}
.btn.danger{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 40%,var(--line))}
.btn.sm{padding:4px 9px;font-size:12.5px} .btn.wide{width:100%}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=url],input[type=time],select,textarea{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 10px}
textarea{resize:vertical;min-height:70px} label{display:block;font-weight:550;font-size:13px}
label>input,label>select,label>textarea{margin-top:4px;font-weight:400}
.check{display:flex;gap:8px;align-items:flex-start;font-weight:450} .check input{width:auto;margin:3px 0 0}
.field{margin-bottom:12px} .hint{font-size:12px;color:var(--muted);font-weight:400;margin-top:3px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .grow{flex:1;min-width:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.badge{display:inline-block;padding:1px 8px;border-radius:99px;background:var(--tint);color:var(--pri);font-size:12px;font-weight:600;line-height:18px}
.badge.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)} .badge.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)} .badge.crit{background:color-mix(in srgb,var(--crit) 16%,transparent);color:var(--crit)}
.err{color:var(--crit);background:color-mix(in srgb,var(--crit) 10%,transparent);border-radius:8px;padding:8px 10px;margin:0 0 12px}

/* entrada */
.auth-page{display:grid;place-items:center;background:linear-gradient(160deg,#0B2240,#0E528F 60%,#1AA6D4)}
.auth{width:100%;padding:20px;display:grid;place-items:center}
.auth-card{width:100%;max-width:380px;background:var(--surface);border-radius:16px;padding:28px;box-shadow:var(--shadow)} .auth-card.wide{max-width:480px}
.auth-card h1{margin:18px 0 14px} .auth-card form label{margin-bottom:12px} .langsw{text-align:center;font-size:12.5px;margin:16px 0 0;color:var(--muted)} .langsw [aria-current]{font-weight:700;text-decoration:none;color:var(--ink)}
.brand{display:flex;gap:10px;align-items:center} .brand small{display:block;color:var(--muted);font-size:12px}
.mark{width:30px;height:30px;border-radius:8px;background:var(--pri);position:relative;flex:none;display:inline-block}
.mark:after{content:"";position:absolute;left:7px;top:8px;width:16px;height:10px;background:#fff;border-radius:2px 2px 2px 0;clip-path:polygon(0 0,100% 0,100% 100%,38% 100%,38% 130%,22% 100%,0 100%)}

/* estructura */
.app{display:grid;grid-template-rows:auto 1fr;height:100dvh}
.top{display:flex;align-items:center;gap:14px;padding:8px 14px;background:var(--surface);border-bottom:1px solid var(--line)}
.top .brand strong{font-size:15px} .nav{display:flex;gap:2px;margin-left:8px}
.nav button{border:0;background:none;padding:8px 12px;border-radius:8px;cursor:pointer;color:var(--muted);font-weight:600;position:relative}
.nav button:hover{background:var(--tint)} .nav button[aria-current=page]{color:var(--pri);background:var(--tint)}
.nav .cnt{margin-left:6px;background:var(--crit);color:#fff;border-radius:99px;font-size:11px;padding:0 6px;line-height:17px;display:inline-block;font-variant-numeric:tabular-nums}
.top .sp{flex:1}
.stsel{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:99px;padding:3px 10px 3px 9px;background:var(--surface)}
.stsel select{border:0;background:transparent;width:auto;padding:2px 2px;font-weight:600;cursor:pointer}
.dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none;display:inline-block} .dot.online{background:var(--ok)} .dot.away{background:var(--warn)} .dot.offline{background:var(--muted)}
.menu{position:relative} .menu>.pop{position:absolute;right:0;top:110%;min-width:210px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:30}
.pop button,.pop a{display:flex;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:8px;cursor:pointer;text-decoration:none;color:var(--ink);gap:8px}
.pop button:hover,.pop a:hover{background:var(--tint)} .pop hr{border:0;border-top:1px solid var(--line);margin:5px 0}
.view{min-height:0;overflow:auto} .page{max-width:1100px;margin:0 auto;padding:22px 20px 60px}
.page>header{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px} .card>h2{margin-bottom:12px}

/* converses: tres columnes */
.convs{display:grid;grid-template-columns:340px minmax(0,1fr) 300px;height:100%;min-height:0}
.col{min-height:0;display:flex;flex-direction:column;background:var(--surface)}
.col.list{border-right:1px solid var(--line)} .col.info{border-left:1px solid var(--line);overflow:auto;padding:14px}
.tabs{display:flex;border-bottom:1px solid var(--line);padding:0 6px} .tabs button{flex:1;border:0;background:none;padding:10px 4px;cursor:pointer;color:var(--muted);font-weight:600;border-bottom:2px solid transparent;font-size:13px}
.tabs button[aria-selected=true]{color:var(--pri);border-bottom-color:var(--pri)} .tabs .n{font-variant-numeric:tabular-nums;margin-left:4px;font-weight:700}
.listtop{padding:8px 10px;border-bottom:1px solid var(--line2);display:flex;gap:8px}
.items{overflow:auto;flex:1;list-style:none;margin:0;padding:0}
.empty{padding:34px 22px;text-align:center;color:var(--muted)} .empty strong{display:block;color:var(--ink);margin-bottom:4px}

/* EL CARRIL D'ESPERA: la barra s'omple i canvia de color a mesura que s'acosta al límit */
.it{display:grid;grid-template-columns:6px 1fr;gap:11px;padding:10px 12px 10px 10px;border-bottom:1px solid var(--line2);cursor:pointer;position:relative}
.it:hover{background:var(--tint)} .it[aria-current=true]{background:var(--sel)}
.rail{border-radius:3px;background:var(--line2);position:relative;overflow:hidden;min-height:44px}
.rail i{position:absolute;left:0;right:0;bottom:0;height:calc(var(--p,0)*100%);background:var(--rc,var(--ok));transition:height .6s linear,background-color .6s}
.rail.ok{--rc:var(--ok)} .rail.warn{--rc:var(--warn)} .rail.crit{--rc:var(--crit)} .rail.act{--rc:var(--acc)}
.it .l1{display:flex;gap:8px;align-items:baseline} .it .nm{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.it .tm{margin-left:auto;font-size:12.5px;font-weight:650;color:var(--muted);flex:none} .it .tm.warn{color:var(--warn)} .it .tm.crit{color:var(--crit)}
.it .pv{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .it .pv b{color:var(--ink);font-weight:600}
.it .l3{display:flex;gap:6px;margin-top:4px;align-items:center;flex-wrap:wrap}
.unread{background:var(--acc);color:#04263a;border-radius:99px;font-size:11px;font-weight:700;padding:0 6px;line-height:17px;margin-left:auto}
.it .take{margin-left:auto}

/* conversa */
.conv{display:flex;flex-direction:column;min-height:0;background:var(--bg)}
.conv>header{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--line)}
.conv>header .t{font-weight:650;font-size:15px} .conv>header .sp{flex:1}
.banner{padding:8px 14px;font-size:13px;background:color-mix(in srgb,var(--warn) 15%,var(--surface));border-bottom:1px solid var(--line)}
.msgs{flex:1;overflow:auto;padding:16px 16px 6px;display:flex;flex-direction:column;gap:6px}
.m{max-width:min(78%,560px);padding:8px 12px;border-radius:14px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.m.v{align-self:flex-start;background:var(--them);border-bottom-left-radius:4px}
.m.a{align-self:flex-end;background:var(--me);color:var(--me-ink);border-bottom-right-radius:4px}
.m.n{align-self:flex-end;background:var(--note);border:1px dashed var(--note-line);border-radius:10px}
.m .by{display:block;font-size:11.5px;opacity:.75;margin-bottom:2px;font-weight:600} .m .ts{display:block;font-size:11px;opacity:.6;margin-top:2px;text-align:right}
.m a{color:inherit;text-decoration:underline}
.sys{align-self:center;font-size:12px;color:var(--muted);padding:2px 10px;background:var(--line2);border-radius:99px;margin:4px 0}
.typing{padding:0 18px 4px;font-size:12px;color:var(--muted);min-height:20px}
.composer{padding:10px 14px 14px;background:var(--surface);border-top:1px solid var(--line);position:relative}
.composer .ta{display:flex;gap:8px;align-items:flex-end} .composer textarea{min-height:44px;max-height:160px;resize:none}
.composer.note textarea{background:var(--note);border-color:var(--note-line)}
.composer .bar{display:flex;gap:8px;align-items:center;margin-bottom:8px;font-size:12.5px;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden} .seg button{border:0;background:none;padding:4px 10px;cursor:pointer;color:var(--muted);font-weight:600} .seg button[aria-pressed=true]{background:var(--tint);color:var(--pri)}
.canned{position:absolute;left:14px;right:14px;bottom:100%;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);max-height:240px;overflow:auto;z-index:10}
.canned button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--line2)}
.canned button[aria-selected=true],.canned button:hover{background:var(--tint)} .canned b{display:block;font-size:13px} .canned span{color:var(--muted);font-size:12.5px}
.placeholder{display:grid;place-items:center;flex:1;color:var(--muted);text-align:center;padding:30px}

/* informació */
.info h3{margin:16px 0 6px;font-size:12.5px;color:var(--muted);font-weight:650} .info h3:first-child{margin-top:0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:13px} .kv dt{color:var(--muted)} .kv dd{margin:0;overflow-wrap:anywhere}
.chips{display:flex;gap:5px;flex-wrap:wrap} .chip{background:var(--tint);color:var(--pri);border-radius:6px;padding:1px 8px;font-size:12px;font-weight:600;display:inline-flex;gap:4px;align-items:center}
.chip button{border:0;background:none;cursor:pointer;color:inherit;padding:0;font-size:14px;line-height:1}
.prev{list-style:none;margin:0;padding:0;font-size:13px} .prev li{padding:4px 0;border-bottom:1px solid var(--line2);cursor:pointer} .prev li:hover{color:var(--pri)}

/* diàlegs i avisos */
.modal-bg{position:fixed;inset:0;background:rgba(6,20,40,.55);display:grid;place-items:center;z-index:50;padding:16px}
.modal{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);width:100%;max-width:520px;max-height:90dvh;overflow:auto;padding:20px} .modal.lg{max-width:760px}
.modal h2{margin-bottom:14px} .modal .foot{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:99px;z-index:60;font-weight:550;max-width:90vw}
.toast.err{background:var(--crit);color:#fff}

/* taules, estadístiques, configuració */
table.t{width:100%;border-collapse:collapse} table.t th{text-align:left;font-size:12.5px;color:var(--muted);font-weight:650;padding:8px 10px;border-bottom:1px solid var(--line)}
table.t td{padding:9px 10px;border-bottom:1px solid var(--line2);vertical-align:top} table.t tr.click{cursor:pointer} table.t tr.click:hover{background:var(--tint)}
.filters{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:10px;margin-bottom:14px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px} .kpi b{display:block;font-size:24px;font-variant-numeric:tabular-nums;letter-spacing:-.02em} .kpi span{color:var(--muted);font-size:12.5px}
.bars{display:flex;align-items:flex-end;gap:4px;height:120px;padding-top:8px} .bars div{flex:1;background:var(--acc);border-radius:3px 3px 0 0;min-height:2px;position:relative;opacity:.9}
.bars div:hover{opacity:1} .barlbl{display:flex;gap:4px;font-size:10.5px;color:var(--muted)} .barlbl span{flex:1;text-align:center}
.hbar{display:grid;grid-template-columns:150px 1fr 40px;gap:10px;align-items:center;margin:6px 0} .hbar i{display:block;height:9px;background:var(--pri);border-radius:5px}
.sect{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px} .sect button{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:5px 13px;cursor:pointer;font-weight:600;color:var(--muted)} .sect button[aria-pressed=true]{background:var(--pri);border-color:var(--pri);color:var(--pri-ink)}
.days{display:grid;grid-template-columns:70px 1fr;gap:8px;align-items:center} .days span{font-weight:600}
.reslist .rr{display:grid;grid-template-columns:150px 1fr auto;gap:8px;margin-bottom:8px} .cannedlist .rr{display:grid;grid-template-columns:110px 150px 1fr auto;gap:8px;margin-bottom:8px}
pre.code{background:var(--ink);color:var(--bg);padding:12px;border-radius:10px;overflow:auto;font-size:12.5px;white-space:pre-wrap;word-break:break-all}
.starz{color:var(--warn);letter-spacing:1px}
.back{display:none}

@media (max-width:1180px){.convs{grid-template-columns:320px minmax(0,1fr)} .col.info{display:none} .convs.showinfo .col.info{display:block;position:fixed;right:0;top:0;bottom:0;width:min(320px,90vw);z-index:40;box-shadow:var(--shadow)}}
@media (min-width:1181px){.infotoggle{display:none}}
@media (max-width:760px){
  .convs{grid-template-columns:1fr} .convs .col.list{display:flex} .convs .conv{display:none}
  .convs[data-pane=conv] .col.list{display:none} .convs[data-pane=conv] .conv{display:flex}
  .back{display:inline-flex} .top{flex-wrap:wrap;gap:8px} .nav{order:5;width:100%;margin:0;overflow:auto} .top .brand small{display:none}
  .filters,.grid2,.grid3{grid-template-columns:1fr} .hbar{grid-template-columns:100px 1fr 36px} .cannedlist .rr,.reslist .rr{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}