/* Iconos, herramientas, panel lateral, chat, tareas, agenda, avisos y reportes */
.ic{flex:none;vertical-align:-3px}
.ic.off{opacity:.75}
.icon-btn{display:inline-grid;place-items:center;color:var(--ink);text-decoration:none}
.icon-btn:hover{border-color:var(--accent)}
.tools{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:12px}
.tools button{position:relative;border:1px solid var(--line);background:var(--surface-2);border-radius:10px;padding:7px 2px 5px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11.5px;color:var(--muted)}
.tools button .ic{color:var(--ink)}
.tools button:hover{border-color:var(--accent)}
.tools button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.tools button[aria-pressed="true"] .ic{color:var(--surface)}
.badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:700;display:inline-grid;place-items:center;line-height:1}
.tools .badge{position:absolute;top:-6px;right:-4px}
.badge.alert{background:var(--danger);color:#fff}
.views{margin-top:8px}
.views button{padding:4px 10px;font-size:12.5px}
.link{display:inline-flex;align-items:center;gap:4px}
.layer{display:inline-flex;align-items:center;gap:5px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.btn-row{display:flex;gap:8px}
.btn-row .btn{flex:1;margin-top:10px}
.x{display:grid;place-items:center}
.plbl .ic{margin-left:2px;color:var(--muted)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);margin-right:6px;vertical-align:1px;flex:none}
.small-txt{font-size:12.5px}
.pad{padding:12px 0}
.sec{margin:14px 0 6px;font-size:12.5px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:4px}
code{font-size:12px;background:var(--surface-2);padding:1px 5px;border-radius:5px;overflow-wrap:anywhere}
.toast .ic{color:var(--surface);opacity:.85}
.tile .name .ic{margin-right:3px}

/* Mis tareas */
#task-form .ghost-sq{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}
#task-form button{display:grid;place-items:center}
#task-list .txt{border:0;background:none;padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
#task-list .txt:hover{color:var(--accent)}
#task-list .by{display:block;color:var(--muted);font-size:11.5px}
.tmeta{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;padding:1px 7px 1px 6px;border-radius:999px;background:color-mix(in srgb,var(--c,#8A97A5) 15%,transparent);color:var(--ink);white-space:nowrap;text-decoration:none}
.pill .ic{color:var(--c,var(--muted))}
.pill.urgent{--c:#D9453B;font-weight:650}
.pill.late{--c:#D9453B;color:var(--danger);font-weight:600}
.panel .ptasks li{padding:0}
.panel .ptasks button{width:100%;text-align:left;border:0;background:none;padding:6px 0;border-top:1px solid var(--line);font:inherit;color:inherit;cursor:pointer}
.panel .ptasks li:first-child button{border-top:0}

/* Panel lateral */
.drawer{position:fixed;top:14px;right:14px;bottom:14px;width:440px;max-width:calc(100vw - 28px);z-index:6;display:flex;flex-direction:column;overflow:hidden}
.drawer[data-kind="reports"]{width:800px}
.drawer-head{display:flex;align-items:center;gap:8px;padding:12px 12px 10px 16px;border-bottom:1px solid var(--line)}
.drawer-head h2{margin:0;font-size:17px;font-weight:650;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#drawer-actions{display:flex;gap:6px;align-items:center}
.drawer-body{flex:1;overflow:auto;padding:4px 16px 16px}
.drawer-foot{border-top:1px solid var(--line);padding:10px 12px}
.empty.pad{text-align:center}

/* Chat */
.ppl{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.pp{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--surface-2);border-radius:10px;padding:7px 9px;text-align:left}
.pp:hover{border-color:var(--accent)}
.pp .avatar{width:30px;height:30px;font-size:13px}
.pp b{display:block;font-size:13px}
.pp small{display:flex;align-items:center;color:var(--muted);font-size:11.5px}
.clist{list-style:none;margin:0;padding:0}
.clist button{width:100%;display:flex;align-items:center;gap:10px;border:0;background:none;padding:9px 4px;border-top:1px solid var(--line);text-align:left}
.clist li:first-child button{border-top:0}
.clist button:hover{background:var(--surface-2)}
.clist b{display:block;font-size:13.5px}
.clist small{display:block;color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:250px}
.cav{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);font-weight:700;flex:none}
.cav.group{color:var(--accent)}
.cmeta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:11.5px;color:var(--muted)}
.csub{margin:6px 0 0;font-size:12.5px}
.msgs{display:flex;flex-direction:column;gap:2px;padding:8px 0}
.mday{align-self:center;font-size:11.5px;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:2px 10px;margin:10px 0 6px}
.msys{align-self:center;font-size:12px;color:var(--muted);margin:4px 0;text-align:center}
.msg{max-width:82%;align-self:flex-start;background:var(--surface-2);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:6px 10px 4px;margin-top:6px}
.msg.cont{margin-top:1px}
.msg b{display:block;font-size:12px}
.msg p{margin:0;font-size:13.5px;overflow-wrap:anywhere}
.msg p a{color:var(--accent)}
.msg time{display:block;text-align:right;font-size:10.5px;color:var(--muted)}
.msg.mine{align-self:flex-end;background:color-mix(in srgb,var(--accent) 16%,var(--surface));border-color:color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:14px 14px 4px 14px}
.chat-form{display:flex;gap:8px;align-items:flex-end}
.chat-form textarea{flex:1;resize:none;border:1px solid var(--line);background:var(--surface-2);border-radius:12px;padding:9px 11px;font:inherit;color:inherit;max-height:120px}
.chat-form .btn{width:44px;height:40px;margin:0;padding:0}

/* Formularios */
.stack{display:flex;flex-direction:column;gap:12px;padding-top:10px}
.fld{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted);border:0;margin:0;padding:0;min-width:0}
.fld legend{padding:0;margin-bottom:5px}
.fld input,.fld select,.fld textarea,.filters select,.filters input{font:inherit;font-size:13.5px;color:var(--ink);border:1px solid var(--line);background:var(--surface-2);border-radius:10px;padding:8px 10px;min-width:0}
.fld textarea{resize:vertical}
.fld :disabled{opacity:.7}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fld-row.three{grid-template-columns:1.4fr 1fr 1fr}
.check{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink);padding:4px 0;cursor:pointer}
.check input{width:17px;height:17px;accent-color:var(--accent);flex:none}
.check span{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.check .avatar{width:24px;height:24px;font-size:11px}
.mail-row{display:flex;gap:8px;align-items:flex-end;margin-top:12px}
.mail-row .fld{flex:1}
.mail-row .btn{margin:0}
.callout{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:11px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);font-size:13px}
.callout>.ic{margin-top:2px}
.callout p{margin:0 0 6px}
.callout p:last-child{margin-bottom:0}
.callout .btn{margin-top:4px}
.callout.ok>.ic{color:#2C9F74}
.callout.alert>.ic{color:var(--danger)}

/* Tablero de tareas */
.filters{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-top:12px}
.filters select{padding:6px 8px;font-size:12.5px}
.search{display:flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--surface-2);border-radius:10px;padding:0 8px;flex:1;min-width:120px;color:var(--muted)}
.search input{border:0!important;background:none!important;padding:6px 0!important;flex:1;width:100%}
.tcards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.tcards li{display:flex;gap:6px;align-items:flex-start;border:1px solid var(--line);border-radius:11px;padding:8px 8px 8px 10px;background:var(--surface)}
.tcards li.late{border-color:color-mix(in srgb,var(--danger) 55%,var(--line))}
.tt{flex:1;min-width:0;display:flex;gap:9px;align-items:flex-start;border:0;background:none;padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.tt b{display:block;font-size:13.5px;font-weight:600}
.tt:hover b{color:var(--accent)}
.tcards select{font:inherit;font-size:12px;border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:3px 4px;color:var(--ink);max-width:112px}
.av-sm{width:24px;height:24px;border-radius:50%;background:var(--c);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;flex:none;margin-top:1px}

/* Editor de tareas */
.modal-card{position:relative;width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.modal-card h2{margin:0 40px 0 0;font-size:19px}
.modal-card .err{margin:0;min-height:0}
.modal-actions{display:flex;gap:8px;justify-content:flex-end}
.modal-actions .btn{width:auto;margin:0;padding:10px 18px}
.thist{list-style:none;margin:0;padding:0;font-size:12.5px}
.thist li{padding:3px 0;border-top:1px solid var(--line)}
.thist time{color:var(--muted);margin-left:4px}

/* Agenda */
.aday.today .sec{color:var(--accent)}
.alist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.alist li{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:11px;padding:8px 10px}
.alist li.live{border-color:#7A5CC4;background:color-mix(in srgb,#7A5CC4 9%,var(--surface))}
.alist li.atask{border-style:dashed}
.alist li.atask.late{border-color:var(--danger)}
.alist .btn{margin:0}
.atime{width:46px;flex:none;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2}
.atime small{color:var(--muted);font-weight:500}
.alist b{display:block;font-size:13.5px}
.alist small{display:block;color:var(--muted);font-size:12px}
.livetag{color:#7A5CC4!important;font-weight:600}
.linkish{border:0;background:none;padding:0;font:inherit;font-weight:600;color:inherit;cursor:pointer;text-align:left}
.linkish:hover{color:var(--accent)}

/* Notificaciones */
.nset{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:12px}
.nset p{margin:0}
.nset .btn{margin:0}
.nlist{list-style:none;margin:10px 0 0;padding:0}
.nlist li{display:flex;gap:10px;align-items:center;padding:9px 4px;border-top:1px solid var(--line)}
.nlist li.unread{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.nlist p{margin:0;font-size:13px}
.nlist time{font-size:11.5px;color:var(--muted)}
.nic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--accent);flex:none}
.nic.k-overdue,.nic.k-knock{color:var(--danger)}
.nic.k-cal{color:#7A5CC4}
.nlist .btn{margin:0;white-space:nowrap}

/* Reportes */
.filters.rep label{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:5px}
.seg{display:flex;flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:2px}
.seg button{border:0;background:none;padding:5px 11px;border-radius:999px;font-size:12.5px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.tbl-wrap{overflow-x:auto}
.rtbl{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.rtbl th,.rtbl td{padding:7px 8px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.rtbl thead th{color:var(--muted);font-weight:500;font-size:11.5px;white-space:normal;vertical-align:bottom}
.rtbl th:first-child{text-align:left}
.rtbl tbody th{font-weight:600}
.rtbl td.warn{color:var(--danger);font-weight:600}
.legend.inline{border:0;margin:0 0 6px;padding:0}
.chart{position:relative;overflow-x:auto}
.chart svg{display:block;min-width:520px;width:auto;max-width:none}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .ax{fill:var(--muted);font-size:11px;font-family:inherit}
.chart path:hover{opacity:.82}
.ctip{position:absolute;pointer-events:none;background:var(--ink);color:var(--surface);font-size:12px;padding:5px 9px;border-radius:7px;white-space:nowrap;z-index:2}
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.scard{border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.scard ul{list-style:none;margin:6px 0 0;padding:0;font-size:12.5px}
.scard li{display:grid;grid-template-columns:1fr 70px 70px;gap:8px;align-items:center;padding:3px 0}
.scard li span:first-child{display:flex;align-items:center}
.sbar{height:6px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.sbar i{display:block;height:100%;background:var(--muted);border-radius:4px}
.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.dl{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}

@media (max-width:720px){
  .drawer,.drawer[data-kind="reports"]{top:8px;left:8px;right:8px;bottom:8px;width:auto;max-width:none}
  .fld-row,.fld-row.three{grid-template-columns:1fr}
  .tools span{display:none}
}