/* Pymetech WA — lo propio de la bandeja; el marco sale de interfaz-2.0.css (kit Pymetech Software). */
body { margin: 0; }
button { font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--nav-accent-ink); outline-offset: 2px; }
.split { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 16px; margin-top: 22px; min-height: 60vh; }
.split > * { min-width: 0; }
.lista { background: #fff; border-radius: 16px; overflow: auto; max-height: 72vh; }
.item { display: block; width: 100%; text-align: left; padding: 12px 16px; border: 0; border-top: 1px solid var(--nav-line); background: none; }
.item:first-child { border-top: 0; }
.item.is-active { background: var(--nav-frame); box-shadow: inset 3px 0 0 var(--nav-accent-solid); }
.item b { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--nav-ink-strong); }
.item small { display: block; color: var(--nav-ink-soft); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.nl { background: var(--nav-accent-solid); color: #fff; border-radius: 9px; padding: 0 7px; font-size: 11px; }
.chat { background: #fff; border-radius: 16px; display: flex; flex-direction: column; max-height: 72vh; }
.chat-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--nav-line); }
.chat-h h2 { font-size: 16px; margin: 0 auto 0 0; }
.msgs { flex: 1; overflow: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; background: var(--nav-frame); }
.m { max-width: 78%; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; }
.m.in { align-self: flex-start; background: #fff; border: 1px solid var(--nav-line); }
.m.out { align-self: flex-end; background: #E9E6FD; }
.m small { display: block; font-size: 10.5px; color: var(--nav-ink-soft); margin-top: 3px; }
.responder { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--nav-line); }
.responder textarea { flex: 1; min-height: 42px; resize: vertical; border: 1px solid var(--nav-slab); border-radius: var(--nav-r-pill); padding: 10px 14px; font: inherit; }
.aviso { padding: 10px 18px; font-size: 13px; color: var(--warn-ink); background: var(--warn-bg); }
.vacio { padding: 40px 20px; text-align: center; color: var(--nav-ink-soft); }
select { border: 1px solid var(--nav-slab); border-radius: 10px; padding: 4px 8px; font: inherit; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .ps-nav { display: flex; } }

/* El kit pone display:inline-flex en .ps-badge y eso le gana al atributo hidden: sin esto, el «0» se ve. */
.ps-badge[hidden] { display: none; }