/* ============================================================
   Oasis Omnicanal · Bandeja · prefijo .bj-
   Usa los tokens de css/oasis.css (var(--...)) y los componentes .o-*
   Columnas: lista 340 px | conversación flexible. Celular: lista → conversación a pantalla completa.
   ============================================================ */
.bj-raiz { flex: 1; min-height: 0; display: flex; background: var(--panel); }
.bj-raiz .o-esp { flex: 1; min-width: 0; }
.bj-corto, .bj-sub-et { display: none; }

/* ---------------- barra lateral ---------------- */
.bj-lat-vistas { margin-top: 2px; }
.bj-lat-canal { display: grid; place-items: center; width: 18px; height: 18px; flex: none; }
.bj-lat-etq { display: grid; place-items: center; flex: none; }
.bj-lat-etq .o-ico { color: inherit !important; }
.bj-lat-acc { width: 26px !important; height: 26px; color: var(--ink-3t); opacity: 0; transition: opacity .12s; }
.o-lat-sec:hover .bj-lat-acc, .bj-lat-acc:focus-visible { opacity: 1; }
@media (hover: none) { .bj-lat-acc { opacity: 1; } }

/* ---------------- lista ---------------- */
.bj-lista { width: var(--lista-w); flex: none; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--panel); }
.bj-lcab { height: var(--cab-h); flex: none; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 16px; }
.bj-lcab .o-btn-lateral { margin-left: -8px; }
.bj-lcab-tit { font-size: 17px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bj-lcab-num { flex: none; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 99px; background: var(--line-2); color: var(--ink-2); font-size: 12px; font-weight: 600; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.bj-lbusca { flex: none; display: flex; align-items: center; gap: 4px; padding: 0 8px 8px 12px; }
.bj-lbusca .o-busca { flex: 1; }
.bj-lbusca .o-input { height: 36px; background: var(--bg); border-color: transparent; }
.bj-lbusca .o-input:focus { background: var(--panel); border-color: var(--olivo); }
.bj-lbusca input[type="search"]::-webkit-search-cancel-button { display: none; }
.bj-lctl { flex: none; display: flex; align-items: center; gap: 8px; padding: 2px 12px 8px 10px; border-bottom: 1px solid var(--line-2); }
.bj-orden { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.bj-orden:hover, .bj-orden[aria-expanded="true"] { background: var(--olivo-50); color: var(--ink); }
.bj-orden .o-ico { color: var(--ink-3); }
.bj-sinresp { font-size: 13px; color: var(--ink-2); gap: 8px; white-space: nowrap; }
.bj-sinresp .o-int-pista { width: 32px; height: 19px; }
.bj-sinresp .o-int-pista::after { width: 14px; height: 14px; }
.bj-sinresp input:checked + .o-int-pista::after { transform: translateX(13px); }
.bj-lfil { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line-2); background: #FBFAF5; }
.bj-fchip { display: inline-flex; align-items: center; gap: 6px; height: 26px; max-width: 100%; padding: 0 3px 0 9px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.bj-fchip > button { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--ink-3t); }
.bj-fchip > button:hover { background: var(--olivo-50); color: var(--ink); }
.bj-fchip .o-canal { flex: none; }
.bj-chip-etq { display: grid; place-items: center; }
.bj-chip-etq .o-ico { color: inherit; }
.bj-limpiar { font-size: 13px; font-weight: 500; color: var(--olivo); padding: 0 6px; border-radius: 6px; }
.bj-limpiar:hover { text-decoration: underline; }
.bj-punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; vertical-align: 0; }
.bj-lcuerpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.bj-lcuerpo .o-vacio { min-height: 280px; }
.bj-lcuerpo .o-esq-caja { padding: 4px 0; }
.bj-lmas, .bj-lfin { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 16px 18px; font-size: 13px; color: var(--ink-3t); }

/* fila */
.bj-f { position: relative; display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line-2); background: var(--panel); transition: background .1s; }
.bj-f:hover { background: var(--hover); }
.bj-f.on { background: var(--olivo-50); }
.bj-f.on::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--olivo); }
.bj-f:focus-visible { outline: 2px solid var(--olivo); outline-offset: -2px; border-radius: 0; }
.bj-f > .o-av { margin-top: 1px; }
.bj-f-c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bj-f-l1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.bj-f-nom { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bj-f.nl .bj-f-nom { font-weight: 600; }
.bj-f-fecha { flex: none; font-size: 12px; color: var(--ink-3t); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bj-f.nl .bj-f-fecha, .bj-f-fecha.espera { color: var(--cobre-t); font-weight: 500; }
.bj-f-l2 { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 13px; color: var(--ink-2); }
.bj-f.nl .bj-f-l2 { color: var(--ink); }
.bj-dir { color: var(--ink-3); flex: none; }
.bj-dir.espera { color: var(--cobre); }
.bj-f-ico { color: var(--ink-3t); flex: none; }
.bj-f-prev { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bj-f-l2 .o-num { flex: none; margin-left: 4px; }
.bj-f-l3 { display: flex; align-items: center; gap: 6px; min-height: 20px; margin-top: 2px; min-width: 0; }
.bj-f-l3 .o-chip { height: 20px; font-size: 12px; padding: 0 7px 0 6px; gap: 5px; min-width: 0; flex: 0 1 auto; background: transparent; }
.bj-f-l3 .o-chip > i { width: 7px; height: 7px; }
.bj-f-etqs { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.bj-f-etqs i { width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); }
.bj-f-info { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-3t); white-space: nowrap; flex: none; }
.bj-f-asig { margin-left: auto; flex: none; display: inline-flex; }
.bj-f-asig .o-av { box-shadow: 0 0 0 2px var(--panel); }
.bj-est { display: inline-flex; flex: none; color: var(--ink-3); }
.bj-est.read { color: var(--ok); }
.bj-est.failed { color: var(--rojo); }
.bj-f-l2 .bj-est { margin-left: 4px; }

/* ---------------- conversación ---------------- */
.bj-conv { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--panel); position: relative; container: bjconv / inline-size; }
.bj-cvacia { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px; background: var(--bg); gap: 4px; }
.bj-cvacia > .o-vacio { flex: none; min-height: 0; padding: 24px; }
.bj-cvacia-pp { width: 100%; max-width: 560px; }
.bj-cvacia-pp:empty { display: none; }
.bj-cvacia-pp:not(:empty) + .o-vacio { padding-top: 12px; }
.bj-cvacia-pp:not(:empty) + .o-vacio .o-vacio-ico { display: none; }
.bj-raiz:has(.bj-lcuerpo > .o-vacio) .bj-cvacia-pp:not(:empty) ~ .o-vacio,
.bj-raiz:has(.bj-lcuerpo > .o-vacio) .bj-cvacia-pp:not(:empty) ~ .bj-atajos { display: none; }
.bj-atajos { font-size: 12px; color: var(--ink-3t); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.bj-atajos kbd { min-width: 20px; text-align: center; }
.bj-atajos-btn { font: inherit; color: var(--olivo); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; padding: 2px 4px; border-radius: 4px; }
.bj-atajos-btn:hover { color: var(--verde); }

/* encabezado */
.bj-ccab { height: 64px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--line); background: var(--panel); min-width: 0; }
.bj-atras { display: none; margin-left: -6px; }
.bj-quien { display: flex; align-items: center; gap: 10px; min-width: 120px; flex: 0 1 auto; padding: 4px 8px 4px 4px; margin-left: -4px; border-radius: 10px; text-align: left; transition: background .12s; }
.bj-quien:hover { background: var(--olivo-50); }
.bj-quien-txt { display: flex; flex-direction: column; min-width: 0; }
.bj-quien-nom { display: flex; align-items: center; gap: 2px; font-size: 15px; font-weight: 600; color: var(--ink); min-width: 0; }
.bj-quien-nom { white-space: nowrap; overflow: hidden; }
.bj-quien-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bj-quien-ch { color: var(--ink-3); flex: none; transition: transform .12s; }
.bj-quien:hover .bj-quien-ch { transform: translateX(2px); color: var(--ink-2); }
.bj-quien-sub { font-size: 12px; color: var(--ink-3t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bj-etapa { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; max-width: 200px; padding: 0 8px 0 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; transition: background .12s, border-color .12s; }
.bj-etapa span { overflow: hidden; text-overflow: ellipsis; }
.bj-etapa > i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.bj-etapa > i.vacio { background: transparent; border: 1.5px dashed var(--ink-3); width: 9px; height: 9px; }
.bj-etapa .o-ico { color: var(--ink-3); flex: none; }
.bj-etapa:hover, .bj-etapa[aria-expanded="true"] { background: var(--olivo-50); border-color: #DAD6C3; }
.bj-etapa.vacia { color: var(--ink-2); border-style: dashed; }
.bj-cacc { display: flex; align-items: center; gap: 4px; flex: none; }
.bj-cacc .o-btn.on { color: var(--cobre-t); background: var(--cobre-50); }
.bj-asig { display: inline-flex; align-items: center; gap: 7px; height: 36px; max-width: 190px; padding: 0 8px 0 6px; border-radius: var(--radio-s); font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; transition: background .12s; margin-right: 2px; }
.bj-asig:hover, .bj-asig[aria-expanded="true"] { background: var(--olivo-50); }
.bj-asig-txt { overflow: hidden; text-overflow: ellipsis; }
.bj-asig .o-ico { color: var(--ink-3); flex: none; }
.bj-asig-vacio { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px dashed #CFCAB6; color: var(--ink-3); flex: none; }
.bj-asig-vacio .o-ico { color: var(--ink-3); }
.bj-cerrar { margin-left: 4px; }
.bj-cerrar .o-ico { color: var(--olivo); }

/* franjas bajo el encabezado */
.bj-cbanner { flex: none; }
.bj-banner { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 16px; font-size: 13px; color: #3B4524; background: var(--olivo-50); border-bottom: 1px solid #E1E5CF; }
.bj-banner > span { flex: 1; min-width: 0; }
.bj-banner .o-ico { color: var(--olivo); }
.bj-banner.pronto { background: var(--arena-50); color: var(--arena-t); border-bottom-color: #F0DFC4; }
.bj-banner.pronto .o-ico { color: var(--cobre); }
.bj-banner .o-btn.sm { height: 28px; flex: none; }
.bj-cbusca { flex: none; display: flex; align-items: center; gap: 4px; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--line-2); background: #FBFAF5; }
.bj-cbusca .o-busca { flex: 1; max-width: 420px; }
.bj-cbusca .o-input { height: 34px; }
.bj-cbusca-n { font-size: 12px; color: var(--ink-3t); min-width: 74px; text-align: right; padding-right: 4px; font-variant-numeric: tabular-nums; }

/* hilo */
.bj-hilo-caja { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.bj-hilo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 24px 16px; background: var(--panel); }
.bj-hilo:focus { outline: none; }
.bj-hilo > .o-vacio { min-height: 100%; }
.bj-anteriores { display: flex; justify-content: center; padding: 10px 0 2px; }
.bj-dia { display: flex; justify-content: center; margin: 16px 0 8px; pointer-events: none; }
.bj-dia span { font-size: 12px; font-weight: 500; color: var(--ink-2); background: var(--panel); border: 1px solid var(--line); border-radius: 99px; padding: 3px 12px; box-shadow: 0 1px 2px rgba(35,42,28,.05); }
.bj-nuevos { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px 0 10px; border-radius: 99px; background: var(--verde); color: #FBFAF2; font-size: 13px; font-weight: 600; box-shadow: var(--sombra-l); }
.bj-nuevos:hover { background: var(--verde-h); }

/* mensajes */
.bj-m { display: flex; align-items: flex-end; gap: 8px; margin-top: 12px; }
.bj-m.grupo { margin-top: 3px; }
.bj-m.sale { flex-direction: row-reverse; }
.bj-m-av { width: 28px; flex: none; display: flex; align-items: flex-end; }
.bj-m-col { min-width: 0; max-width: min(72%, 600px); display: flex; flex-direction: column; }
.bj-m.sale .bj-m-col { align-items: flex-end; }
.bj-burbuja { position: relative; max-width: 100%; padding: 8px 12px 6px; border-radius: 14px; background: var(--burbuja-in); color: var(--ink); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; word-break: break-word; }
.bj-m.entra.fin .bj-burbuja { border-bottom-left-radius: 5px; }
.bj-m.sale .bj-burbuja { background: var(--burbuja-out); }
.bj-m.sale.fin .bj-burbuja { border-bottom-right-radius: 5px; }
.bj-m.sistema .bj-burbuja { background: #F5F3EA; border: 1px dashed #DDD8C4; }
.bj-m.pend .bj-burbuja { opacity: .8; }
.bj-m.fallo .bj-burbuja { background: var(--rojo-50); box-shadow: inset 0 0 0 1px #EBCFC7; opacity: 1; }
.bj-m.com .bj-burbuja { background: var(--arena-50); box-shadow: inset 0 0 0 1px #F0DCBC; }
.bj-m-txt { white-space: pre-wrap; }
.bj-m-txt a { color: var(--olivo); text-decoration: underline; text-underline-offset: 2px; }
.bj-m-ico { display: inline-block; vertical-align: -3px; margin-right: 5px; color: var(--ink-2); }
.bj-m-borrado { display: flex; align-items: center; gap: 6px; font-style: italic; color: var(--ink-3t); }
.bj-m-vacio { color: var(--ink-3t); font-style: italic; }
.bj-m-pie { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px; margin-top: 2px; font-size: 12px; line-height: 1.3; color: var(--ink-3t); white-space: nowrap; }
.bj-m.entra .bj-m-pie { justify-content: flex-start; }
.bj-pto { opacity: .6; }
.bj-m-pie .bj-est { margin-left: 2px; }
.bj-m-reac { position: absolute; bottom: -12px; right: 10px; min-width: 24px; height: 22px; padding: 0 5px; display: grid; place-items: center; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); font-size: 13px; line-height: 1; box-shadow: 0 1px 2px rgba(35,42,28,.08); }
.bj-m.entra .bj-m-reac { right: auto; left: 10px; }
.bj-m:has(.bj-m-reac) { margin-bottom: 12px; }
.bj-m-err { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: #8A3B2A; flex-wrap: wrap; justify-content: flex-end; }
.bj-m-err .o-ico { color: var(--rojo); }
.bj-m-err button { font-weight: 600; color: var(--rojo); text-decoration: underline; text-underline-offset: 2px; padding: 2px 4px; border-radius: 4px; }
.bj-m-err button:hover { background: var(--rojo-50); }
.bj-com-cab { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; font-size: 12px; font-weight: 600; color: var(--arena-t); }
.bj-com-cab .o-ico { color: var(--cobre); }
.bj-mencion { color: var(--arena-t); font-weight: 600; background: rgba(221,161,94,.22); border-radius: 4px; padding: 0 2px; }
.bj-av-sis { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--arena-50); color: var(--cobre); border: 1px solid #F0DCBC; }
.bj-marca { background: #F6DFA8; color: inherit; border-radius: 3px; padding: 0 1px; }
.bj-marca.actual { background: var(--arena); box-shadow: 0 0 0 2px rgba(188,108,37,.25); }

/* adjuntos */
.bj-adjs { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 4px; }
.bj-adj { display: inline-flex; align-items: center; gap: 8px; max-width: 280px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.7); border: 1px solid var(--line); font-size: 13px; color: var(--ink); text-decoration: none; }
a.bj-adj:hover { background: var(--panel); text-decoration: none; border-color: #D8D3C0; }
.bj-adj > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bj-adj .o-ico { color: var(--ink-2); }
.bj-adj-des { margin-left: auto; color: var(--ink-3) !important; }
.bj-adj.no { color: var(--ink-3t); background: transparent; border-style: dashed; font-size: 13px; }
.bj-adj-img { display: block; max-width: 280px; border-radius: 10px; overflow: hidden; background: var(--line-2); line-height: 0; cursor: zoom-in; min-width: 120px; min-height: 80px; }
.bj-adj-img img { width: 100%; max-height: 320px; object-fit: cover; }
.bj-adj-img.sticker { background: transparent; min-height: 0; }
.bj-adj-img.sticker img { width: 140px; object-fit: contain; }
.bj-adj-img.roto { display: none; }

/* eventos del sistema (centrados en gris) */
.bj-evento { display: flex; justify-content: center; margin: 12px 0; }
.bj-evento-in { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 92%; font-size: 12px; line-height: 1.5; color: var(--ink-3t); text-align: center; }
.bj-evento-in > .o-ico { color: var(--ink-3); }
.bj-evento-in time { color: var(--ink-3t); font-variant-numeric: tabular-nums; }
.bj-evento-in .bj-punto { width: 7px; height: 7px; margin: 0 3px 0 1px; vertical-align: 1px; }
.bj-flecha { color: var(--ink-3t); }

/* esqueleto del hilo */
.bj-esq-hilo { padding-top: 20px; }
.bj-esq-burbuja { height: 38px; border-radius: 14px; }

/* ---------------- compositor ---------------- */
.bj-comp { flex: none; position: relative; padding: 4px 16px 12px; background: var(--panel); }
.bj-comp:empty { display: none; }
.bj-comp-caja { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); transition: border-color .12s, box-shadow .12s, background .12s; }
.bj-comp-caja:focus-within { border-color: var(--olivo); box-shadow: var(--foco); }
.bj-comp.comentario .bj-comp-caja { background: var(--arena-50); border-color: #EBCF9F; }
.bj-comp.comentario .bj-comp-caja:focus-within { border-color: var(--arena); box-shadow: 0 0 0 3px rgba(221,161,94,.22); }
.bj-comp.bloqueado .bj-comp-caja { background: #FAF9F4; }
.bj-comp-top { display: flex; align-items: center; gap: 12px; min-height: 30px; padding: 6px 12px 0; font-size: 12px; color: var(--ink-2); min-width: 0; }
.bj-ctop-canal { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; font-weight: 500; white-space: nowrap; }
.bj-ctop-canal > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.bj-ctop-canal.com { color: var(--arena-t); }
.bj-ctop-canal.com .o-ico { color: var(--cobre); }
.bj-ven { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; min-width: 0; color: var(--ink-3t); text-align: right; }
.bj-ven > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bj-ven .o-ico { color: var(--ink-3); flex: none; }
.bj-ven.pronto { color: var(--cobre-t); }
.bj-ven.pronto .o-ico { color: var(--cobre); }
.bj-ven.ha { color: #3D5A70; }
.bj-ven.cerrada { color: var(--cobre-t); white-space: normal; align-items: flex-start; }
.bj-ven.cerrada > span { white-space: normal; }
.bj-ven.cerrada .o-ico { color: var(--cobre); margin-top: 1px; }
.bj-ven a { flex: none; font-weight: 600; color: var(--olivo); white-space: nowrap; margin-left: 4px; }
.bj-comp.bloqueado .bj-comp-top { flex-wrap: wrap; row-gap: 4px; padding-bottom: 2px; }
.bj-comp.bloqueado .bj-ven { flex-basis: 100%; margin-left: 0; text-align: left; }
.bj-comp.bloqueado .bj-ta { min-height: 36px; }
.bj-ta { display: block; width: 100%; min-height: 44px; max-height: 200px; padding: 8px 12px 6px; border: 0; background: transparent; resize: none; font-size: 14px; line-height: 1.45; color: var(--ink); outline: none; }
.bj-ta:focus-visible { outline: none; }
.bj-ta:disabled { cursor: not-allowed; color: var(--ink-3t); }
.bj-comp-barra { display: flex; align-items: center; gap: 6px; padding: 2px 8px 8px 6px; }
.bj-herrs { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.bj-herr { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: var(--ink-2); flex: none; transition: background .12s, color .12s; }
.bj-herr:hover:not(:disabled) { background: var(--olivo-50); color: var(--ink); }
.bj-herr.pronto { color: var(--ink-3); cursor: not-allowed; }
.bj-herr.pronto:hover { background: transparent; color: var(--ink-3); }
.bj-herr.ocupado { pointer-events: none; }
.bj-herr.ocupado .o-ico { opacity: .35; }
.bj-herr.ocupado::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid var(--olivo); border-right-color: transparent; border-radius: 50%; animation: o-gira .75s linear infinite; }
.bj-comp.bloqueado .bj-herr:not(.pronto) { opacity: .45; pointer-events: none; }
.bj-comp.comentario .bj-herr:hover:not(:disabled) { background: rgba(221,161,94,.18); }
.bj-cnt { font-size: 12px; color: var(--ink-3t); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bj-cnt.mal { color: var(--rojo); font-weight: 600; }
.bj-enviar { height: 34px; padding: 0 14px; }
.bj-comp.comentario .bj-enviar { background: var(--arena-t); border-color: var(--arena-t); }
.bj-comp.comentario .bj-enviar:hover:not(:disabled) { background: #5F3D10; border-color: #5F3D10; }
.bj-comp-pie { display: flex; align-items: center; gap: 8px; padding: 6px 2px 0; min-height: 30px; }
.bj-modo, .bj-pie-btn { white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.bj-modo:hover, .bj-pie-btn:hover:not(:disabled) { background: var(--olivo-50); color: var(--ink); }
.bj-modo .o-ico { color: var(--cobre); }
.bj-modo.on { color: var(--arena-t); }
.bj-pie-btn .o-ico { color: var(--olivo); }
.bj-pie-btn.ocupado { opacity: .6; pointer-events: none; }

/* selector de respuestas rápidas, emojis y menciones (sale arriba del compositor) */
.bj-pop { position: absolute; left: 16px; right: 16px; bottom: calc(100% - 2px); z-index: 6; max-height: min(320px, 46vh); overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sombra-l); padding: 4px; animation: o-menu .12s ease-out; }
.bj-pop.emoji { right: auto; }
.bj-pop.grid { right: auto; width: min(360px, calc(100% - 32px)); }
.bj-pop-cab { position: sticky; top: -4px; z-index: 1; display: flex; align-items: center; gap: 6px; margin: -4px -4px 4px; padding: 9px 12px 8px; font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--panel); border-bottom: 1px solid var(--line-2); border-radius: 12px 12px 0 0; }
.bj-pop-cab .o-ico { color: var(--cobre); }
.bj-pop-teclas { font-weight: 400; color: var(--ink-3t); font-size: 12px; display: inline-flex; align-items: center; gap: 3px; }
.bj-pop-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border-radius: 8px; text-align: left; }
.bj-pop-item:hover, .bj-pop-item.on { background: var(--olivo-50); }
.bj-pop-atajo { flex: none; min-width: 92px; font-size: 13px; font-weight: 600; color: var(--olivo); font-variant-numeric: tabular-nums; }
.bj-pop-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bj-pop-txt b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bj-pop-txt small { font-size: 12px; color: var(--ink-3t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bj-pop-vacio { padding: 12px; font-size: 13px; color: var(--ink-2); }
.bj-pop-crear { display: inline-flex; align-items: center; gap: 6px; margin: 0 8px 8px; padding: 6px 8px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--olivo); }
.bj-pop-crear:hover { background: var(--olivo-50); }
.bj-pop-fila { display: flex; gap: 2px; }
.bj-pop-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 2px; }
.bj-pop-emoji { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; font-size: 21px; line-height: 1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.bj-pop-grid .bj-pop-emoji { width: 100%; }
.bj-pop-emoji:hover, .bj-pop-emoji.on { background: var(--olivo-50); }

/* fecha y hora para posponer */
.bj-fecha { display: flex; gap: 12px; }
.bj-fecha .o-campo { flex: 1; margin-top: 0 !important; }

/* visor de imágenes */
.bj-visor { position: fixed; inset: 0; z-index: var(--z-velo); background: rgba(20,24,16,.86); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; animation: o-aparece .14s ease-out; cursor: zoom-out; }
.bj-visor img { max-width: 100%; max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.4); cursor: default; }
.bj-visor-acc { display: flex; gap: 8px; }

/* conversación angosta (p. ej. 1440 px con el panel del contacto abierto): el encabezado se compacta por el ANCHO
   de la conversación, no de la ventana. Buscar y Posponer pasan al menú ⋯ (menuMas usa el mismo corte de 560 px). */
@container bjconv (max-width: 720px) {
  .bj-asig-txt { display: none; }
  .bj-asig { padding: 0 6px; }
  .bj-cerrar { width: 36px; padding: 0; }
  .bj-cerrar span { display: none; }
  .bj-etapa { max-width: 150px; }
}
@container bjconv (max-width: 560px) {
  .bj-ccab { gap: 6px; padding-right: 8px; }
  .bj-ctop-cuenta { display: none; }
  .bj-comp-top { gap: 8px; }
  .bj-solo-esc { display: none !important; }
  .bj-quien-ch { display: none; }
  .bj-etapa { max-width: 120px; }
}
/* muy angosta (1440 px con el panel del contacto abierto ≈ 436 px): el nombre manda; la etapa queda como punto con menú
   (su nombre se ve en el panel del contacto y en el subtítulo) */
@container bjconv (max-width: 480px) {
  .bj-largo { display: none; }
  .bj-corto { display: inline; }
  .bj-etapa { padding: 0 6px 0 8px; gap: 3px; }
  .bj-etapa span { display: none; }
  .bj-quien { min-width: 140px; }
}

/* todavía más angosta (tablet ≈ 356 px, 1100 px con el panel abierto): la etapa pasa al subtítulo (como en el celular)
   y al menú ⋯ (menuMas usa el mismo corte de 400 px), para que el nombre se lea */
@container bjconv (max-width: 400px) {
  .bj-etapa { display: none; }
  .bj-quien { flex: 1 1 auto; min-width: 0; }
  .bj-sub-et { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-weight: 500; }
  .bj-sub-et i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
  .bj-sub-et i.vacio { border: 1.5px dashed var(--ink-3); width: 8px; height: 8px; }
  .bj-sub-et .bj-pto { white-space: pre; color: var(--ink-3); }
  /* compositor: el canal queda solo como ícono (igual que en el celular) para que la ventana de 24 h se lea completa */
  .bj-ctop-canal:not(.com) > span:last-child { display: none; }
  .bj-ven { margin-left: 0; }
}

/* ---------------- tablet ---------------- */
@media (max-width: 1099px) {
  .bj-lista { width: 300px; }
  .bj-hilo { padding: 8px 16px 16px; }
  .bj-asig-txt { display: none; }
  .bj-asig { padding: 0 6px; }
  .bj-solo-esc { display: none !important; }
  .bj-cerrar { width: 36px; padding: 0; }
  .bj-cerrar span { display: none; }
  .bj-etapa { max-width: 150px; }
  .bj-lctl { padding-left: 6px; padding-right: 10px; }
  .bj-orden { font-size: 13px; padding: 0 6px; }
  .bj-sinresp { font-size: 13px; }
}
@media (min-width: 760px) and (max-width: 1240px) {
  .con-conv.derecho-abierto .bj-asig-txt { display: none; }
  .con-conv.derecho-abierto .bj-cerrar span { display: none; }
  .con-conv.derecho-abierto .bj-cerrar { width: 36px; padding: 0; }
}

/* ---------------- celular: lista → conversación a pantalla completa ---------------- */
@media (max-width: 759px) {
  .bj-lista { width: 100%; border-right: 0; }
  .bj-conv { display: none; }
  .bj-raiz.abierta .bj-lista { display: none; }
  .bj-raiz.abierta .bj-conv { display: flex; }
  .bj-lcab { padding: 0 6px 0 12px; }
  .bj-lcab .o-btn-lateral { margin-left: -4px; }
  .bj-lctl { padding: 0 12px 8px 8px; }
  .bj-orden, .bj-sinresp { min-height: 40px; font-size: 14px; }
  .bj-f { padding: 12px 12px 12px 16px; }
  .bj-f-nom { font-size: 15px; }
  .bj-f-l2 { font-size: 14px; }
  .bj-ccab { height: 60px; gap: 6px; padding: 0 4px 0 8px; }
  .bj-atras { display: inline-flex; width: 40px; height: 40px; margin-left: 0; }
  .bj-quien { flex: 1 1 auto; padding: 4px; gap: 8px; }
  .bj-quien .o-av { width: 34px !important; height: 34px !important; }
  .bj-quien-nom { font-size: 15px; }
  .bj-quien-ch { display: none; }
  .bj-etapa, .bj-asig { display: none; }
  .bj-sub-et { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-weight: 500; }
  .bj-sub-et i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
  .bj-sub-et i.vacio { border: 1.5px dashed var(--ink-3); width: 8px; height: 8px; }
  .bj-sub-et .bj-pto { white-space: pre; color: var(--ink-3); }
  .bj-largo { display: none; }
  .bj-corto { display: inline; }
  .bj-cerrar { width: 40px; padding: 0; margin-left: 0; }
  .bj-cerrar span { display: none; }
  .bj-cacc { gap: 0; }
  .bj-cacc .o-btn.ico { width: 40px; height: 40px; }
  .bj-banner { padding: 8px 8px 8px 12px; font-size: 13px; }
  .bj-hilo { padding: 4px 10px 14px; }
  .bj-m-col { max-width: 84%; }
  .bj-m-av { width: 24px; }
  .bj-m-av .o-av, .bj-m-av .bj-av-sis { width: 24px !important; height: 24px !important; font-size: 10px !important; }
  .bj-burbuja { font-size: 15px; }
  .bj-comp { padding: 4px 8px calc(8px + env(safe-area-inset-bottom)); }
  .bj-comp-top { padding: 6px 10px 0; gap: 8px; }
  .bj-ctop-canal > span:last-child { display: none; }
  .bj-ven { margin-left: 0; text-align: left; }
  .bj-ta { font-size: 16px; padding: 8px 10px 4px; }
  .bj-herr { width: 40px; height: 40px; }
  .bj-enviar { height: 40px; width: 44px; padding: 0; }
  .bj-enviar span { display: none; }
  .bj-comp-pie { padding: 4px 0 0; }
  .bj-modo, .bj-pie-btn { height: 36px; font-size: 14px; }
  .bj-pop { left: 8px; right: 8px; max-height: 50vh; max-height: 50dvh; }
  .bj-pop.grid { width: auto; right: 8px; }
  .bj-pop-teclas { display: none; }
  .bj-pop-item { min-height: 48px; }
  .bj-pop-atajo { min-width: 76px; }
  .bj-cbusca { padding: 6px 4px 6px 10px; }
  .bj-cbusca .o-btn.ico.sm { width: 40px; height: 40px; }
  .bj-cbusca-n { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bj-herr.ocupado::after { animation: o-gira 1.6s linear infinite !important; }
}

/* con una conversación abierta, los avisos (toasts) suben para no tapar el compositor */
@media (min-width: 760px) { .o-app.con-conv ~ #toasts { top: 132px; bottom: auto; } }
@media (max-width: 759px) { .o-app.con-conv.enfoque ~ #toasts { top: calc(124px + env(safe-area-inset-top)); bottom: auto; } }

/* ---------------- fotos y archivos que mandamos (adjuntos.js) ---------------- */
.bj-conv.bj-soltando::after { content: 'Suelta el archivo para mandarlo'; position: absolute; inset: 10px; z-index: 30; display: grid; place-items: center; border: 2px dashed var(--olivo); border-radius: var(--radio-l); background: rgba(240,242,230,.93); color: var(--verde); font-size: 15px; font-weight: 600; pointer-events: none; }
.bj-adj small { flex: none; font-size: 12px; color: var(--ink-3t); }
.bj-adj-img.adj-pend { position: relative; cursor: default; }
.bj-adj-img.adj-pend img { opacity: .72; }
.bj-adj.adj-pend { position: relative; padding-bottom: 13px; }
.adj-subida { position: absolute; left: 10px; right: 10px; bottom: 8px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.75); overflow: hidden; }
.bj-adj .adj-subida { bottom: 5px; height: 3px; background: var(--line-2); }
.adj-subida > i { display: block; height: 100%; width: 4%; border-radius: 4px; background: var(--olivo); transition: width .2s ease-out; }
.bj-m.fallo .adj-pend img { opacity: .5; }
/* vista previa antes de mandar */
.adj-prev-img { display: grid; place-items: center; border-radius: var(--radio); overflow: hidden; background: var(--line-2); }
.adj-prev-img img { display: block; max-width: 100%; max-height: min(46vh, 420px); object-fit: contain; }
.adj-prev-doc { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radio); background: var(--bg); }
.adj-prev-doc .o-ico { flex: none; color: var(--olivo); }
.adj-prev-doc > span { min-width: 0; }
.adj-prev-doc b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.adj-prev-doc small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3t); }
.adj-prev-dato { display: flex; align-items: center; gap: 6px; margin: 10px 0 12px; font-size: 12px; color: var(--ink-2); }
.adj-prev-dato > span { min-width: 0; }
.adj-prev .adj-pie { min-height: 64px; }
@media (max-width: 759px) { .adj-prev .adj-pie { font-size: 16px; } .adj-prev-img img { max-height: 38vh; } }
@media (prefers-reduced-motion: reduce) { .adj-subida > i { transition: none; } }
.adj-prev-demo { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; padding: 10px 12px; border-radius: var(--radio-s); background: var(--arena-50); color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.adj-prev-demo .o-ico { flex: none; margin-top: 1px; color: var(--cobre); }

/* con el dedo: el botón de "Desactivar atajos" (texto chico) recibe toques en 44 px de alto */
@media (pointer: coarse) { .bj-atajos-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; } }