/* PITBOX DMS — piezas compartidas por la aplicación de agencias y el panel: semáforos de plazo, la conversación de
   un ticket de soporte y sus relojes. */

/* ---------- semáforo de un plazo (chip con punto) ---------- */
.sema{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;padding:3px 9px 3px 8px;border-radius:999px;white-space:nowrap;background:var(--sunk);color:var(--ink-2);border:1px solid var(--line)}
.sema::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.sema.ok{background:var(--teal-soft);color:var(--teal-ink);border-color:#c4ebe6}
.sema.warn{background:var(--warn-soft);color:#8a5d00;border-color:#f1dc9c}
.sema.bad{background:var(--bad-soft);color:var(--bad);border-color:#f5c6c2}
.sema.bad::before{animation:pulse 2s ease-in-out infinite}
.sema.mute{color:var(--ink-3)}

.btn.xs{height:24px;padding:0 7px;font-size:11.5px;border-radius:6px;gap:4px}
.btn.xs svg{width:12px;height:12px}
.act-h1{font-family:var(--f-ui);font-size:26px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.x-mini{margin-left:4px;font-size:13px;line-height:1;color:var(--ink-3)}
.x-mini:hover{color:var(--bad)}
.nav-cnt{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--teal);color:#fff;font-size:10.5px;font-weight:600;display:inline-grid;place-items:center}
.auto-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--teal-soft);color:var(--teal-ink);flex:none}
.auto-ico svg{width:19px;height:19px}

/* ---------- soporte ---------- */
.sop-seg{margin-bottom:12px}
.sop-acc{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.sop-grid{grid-template-columns:minmax(0,1fr) 360px;align-items:start}
.tbl tr.nuevo td:first-child{box-shadow:inset 3px 0 0 var(--teal)}
.sop-prio{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.sop-prio button{text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--card);display:flex;flex-direction:column;gap:3px;transition:border-color .15s,box-shadow .15s}
.sop-prio button b{font-size:13px}
.sop-prio button small{font-size:11.5px;color:var(--ink-3);line-height:1.3}
.sop-prio button.on{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-soft)}
.sop-prio button.on.bad{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-soft)}
.sop-prio button.on.warn{border-color:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
.sop-hilo{display:flex;flex-direction:column;gap:14px;max-height:none}
.sop-msg{max-width:86%;padding:12px 14px;border-radius:14px;background:var(--sunk);border:1px solid var(--line);align-self:flex-start}
.sop-msg.yo{align-self:flex-end;background:var(--navy-soft);border-color:#d5ddef}
.sop-msg.lb{background:linear-gradient(180deg,var(--teal-soft),#fff 80%);border-color:#c4ebe6}
.sop-msg.interno{background:var(--warn-soft);border:1px dashed #e5c56a;align-self:stretch;max-width:none}
.sop-quien{display:flex;align-items:center;gap:8px;font-size:12.5px;margin-bottom:6px}
.sop-quien small{color:var(--ink-3);margin-left:auto;font-size:11.5px}
.sop-quien .avatar{width:22px;height:22px;font-size:9px}
.sop-lb{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#fff;font-size:8.5px;font-weight:700;letter-spacing:.02em}
.sop-txt{font-size:13.5px;line-height:1.5;color:var(--ink)}
.sop-msg .galeria{margin-top:10px}
.sop-sis{text-align:center;font-size:11.5px;color:var(--ink-3)}
.sop-sis span{background:var(--sunk);padding:3px 10px;border-radius:999px;border:1px solid var(--line-2)}
.sop-responder{border-top:1px solid var(--line)}
.sop-responder textarea{width:100%;border:1px solid var(--line);border-radius:11px;padding:10px 12px;font:inherit;font-size:13.5px;resize:vertical;background:var(--card)}
.sop-responder textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(20,179,166,.16)}
.sop-resuelto{justify-content:flex-start}
.sop-resuelto .btn{margin-left:auto}
a.sop-resumen{display:block;color:inherit;transition:border-color .15s,box-shadow .15s}
a.sop-resumen:hover{border-color:var(--teal);box-shadow:0 0 0 3px rgba(20,179,166,.10)}
.sop-resumen .card-b{display:flex;align-items:center;gap:14px}
.sop-resumen .card-b > div{flex:1;display:flex;flex-direction:column}
.sop-resumen small{color:var(--ink-3);font-size:12.5px}
.sop-resumen > .card-b > .ico:last-child{color:var(--ink-3)}

@media (max-width:1320px){.sop-grid{grid-template-columns:1fr}}
@media (max-width:760px){.sop-prio{grid-template-columns:repeat(2,minmax(0,1fr))}.sop-msg{max-width:100%}}