/* ============================================================================
   Insi.Comun.Chat — RCL Central de Mensajeria (C2)
   Prefijo .cht- · paleta corporativa via variables con fallback.
   Referencia visual: WhatsApp Web / Intercom, con identidad Insi.
   ============================================================================ */

.cht-bandeja {
    --cht-primario: var(--primario, #284A70);
    --cht-secundario: var(--secundario, #fe7800);
    --cht-azul-osc: #1e3a5f;
    --cht-azul-med: #2c5282;
    --cht-dorado: #d4af37;
    --cht-fondo: #f5f7fb;
    --cht-linea: #e0e4ec;
    --cht-wsp: #25d366;

    height: 100%;
    display: grid;
    grid-template-columns: 340px 1fr 300px;
    background: #fff;
    position: relative;
    overflow: hidden;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    color: #263243;
}

.cht-bandeja--panel-off {
    grid-template-columns: 340px 1fr 0;
}

/* En pantallas anchas la lista y el panel ganan aire (el panel muestra cliente, oportunidad y atencion). */
@media (min-width: 1440px) {
    .cht-bandeja { grid-template-columns: 380px 1fr 340px; }
    .cht-bandeja--panel-off { grid-template-columns: 380px 1fr 0; }
}

.cht-bandeja--panel-off .cht-col--panel {
    display: none;
}

.cht-col {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cht-col--lista {
    border-right: 1px solid var(--cht-linea);
    background: #fff;
}

.cht-col--hilo {
    background: #f0f2f7;
}

.cht-col--panel {
    border-left: 1px solid var(--cht-linea);
    background: #fff;
}

/* ── Botones e iconos genericos ── */
.cht-iconbtn {
    border: none;
    background: transparent;
    color: #56637a;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: background .15s, color .15s;
}
.cht-iconbtn:hover {
    background: var(--cht-fondo);
    color: var(--cht-azul-osc);
}

.cht-btn {
    border: none;
    border-radius: 9px;
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    transition: filter .15s, background .15s;
}
.cht-btn--primario {
    background: var(--cht-azul-osc);
    color: #fff;
}
.cht-btn--primario:hover { filter: brightness(1.12); }
.cht-btn--sec {
    background: var(--cht-fondo);
    color: #44506a;
    border: 1px solid var(--cht-linea);
}
.cht-btn--sec:hover { background: #eef1f7; }

.cht-muted { color: #9aa4b8; }

/* ── Badge de canal (superpuesto al avatar) ── */
.cht-canal-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 9px;
}
.cht-canal-badge--lg {
    width: 26px;
    height: 26px;
    font-size: 13px;
    right: 2px;
    bottom: 2px;
}
.cht-canal-badge.wsp { background: var(--cht-wsp); }
.cht-canal-badge.msn { background: #0084ff; }
.cht-canal-badge.ig  { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
.cht-canal-badge.tg  { background: #29a9eb; }

/* ── Avatar ── */
.cht-avatar {
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    letter-spacing: .3px;
    flex: 0 0 auto;
    user-select: none;
}

/* ============================================================================
   Columna 1 — Lista de conversaciones
   ============================================================================ */
.cht-lista {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
.cht-lista__head {
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--cht-linea);
    flex: 0 0 auto;
}
.cht-lista__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--cht-azul-osc);
    margin-bottom: 10px;
}
/* Pestañas Mias / Sin asignar / Todas: control segmentado con el numero de cada una. */
.cht-seg {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: #eef1f6;
}
.cht-seg__btn {
    flex: 1 1 0;
    min-width: 0;
    border: none;
    background: transparent;
    border-radius: 8px;
    padding: 6px 6px;
    font-size: 13px;
    font-weight: 500;
    color: #56637a;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.cht-seg__btn:hover { color: #1f2937; }
.cht-seg__btn.on {
    background: #fff;
    color: #1565c0;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
.cht-seg__n { color: #8b95ab; font-weight: 500; margin-left: 2px; }
.cht-seg__btn.on .cht-seg__n { color: #7a9cc6; }

/* Filtro "Origen": por donde llego cada conversacion, con cuantas hay de cada uno. */
.cht-origen { position: relative; margin-top: 10px; }
.cht-origen__btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--cht-linea);
    border-radius: 9px;
    background: #fff;
    font-size: 13px;
    color: #263243;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, box-shadow .15s;
}
.cht-origen__btn:hover { border-color: #c9d0dd; }
.cht-origen__btn.open {
    border-color: var(--cht-dorado);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, .15);
}
.cht-origen__btn.on { border-color: #e6cf85; background: #fffcf2; }
.cht-origen__lbl { color: #77839a; flex: 0 0 auto; }
.cht-origen__val {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cht-origen__caret { color: #8b95ab; font-size: 11px; }
.cht-origen__x {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8a6d1a;
    font-size: 11px;
}
.cht-origen__x:hover { background: rgba(212, 175, 55, .22); }
.cht-origen__fondo { position: fixed; inset: 0; z-index: 20; }
.cht-origen__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 21;
    max-height: 360px;
    overflow-y: auto;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--cht-linea);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .16);
}
.cht-origen__item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    text-align: left;
}
.cht-origen__item:hover { background: #f5f7fb; }
.cht-origen__item.on { background: #eef4fd; }
.cht-origen__dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; }
.cht-origen__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cht-origen__t {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cht-origen__d {
    font-size: 11.5px;
    color: #8b95ab;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cht-origen__n { flex: 0 0 auto; font-size: 12px; color: #77839a; }
.cht-origen__vacio { padding: 10px; font-size: 12.5px; color: #8b95ab; }

.cht-lista__items {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}

/* ── C7: busqueda server-side ── */
.cht-buscar {
    position: relative;
    display: flex;
    align-items: center;
    margin: 12px 0 10px;
}
.cht-buscar i.fa-search {
    position: absolute;
    left: 11px;
    font-size: 12px;
    color: #9aa4b8;
    pointer-events: none;
}
.cht-buscar__input {
    width: 100%;
    font-size: 13.5px;
    padding: 9px 30px 9px 32px;
    border-radius: 9px;
    border: 1px solid var(--cht-linea);
    background: #fff;
    outline: none;
    color: #263243;
    transition: border-color .15s, background .15s;
}
.cht-buscar__input:focus {
    border-color: var(--cht-azul-med);
    background: #fff;
}
.cht-buscar__x {
    position: absolute;
    right: 6px;
    border: none;
    background: transparent;
    color: #9aa4b8;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 11px;
}
.cht-buscar__x:hover { background: #eef1f7; color: #56637a; }

.cht-lista__vacio {
    padding: 48px 24px;
    text-align: center;
    color: #9aa4b8;
}
.cht-lista__vacio i {
    font-size: 40px;
    color: #cdd4e2;
    margin-bottom: 12px;
    display: block;
}
.cht-lista__vacio div { font-weight: 600; color: #6b7488; }
.cht-lista__vacio span { font-size: 12.5px; display: block; margin-top: 4px; }

.cht-conv {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f1f3f8;
    transition: background .12s;
}
.cht-conv:hover { background: #fafbfd; }
.cht-conv.sel { background: #eef4fd; }
.cht-conv__ava {
    position: relative;
    flex: 0 0 auto;
}
.cht-conv__body {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}
.cht-conv__top, .cht-conv__bottom {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cht-conv__name {
    flex: 1 1 0;
    min-width: 0;
    font-weight: 600;
    font-size: 14px;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cht-conv__time {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: #9aa4b8;
}
.cht-conv__last {
    flex: 1 1 0;
    min-width: 0;
    font-size: 13px;
    color: #77839a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cht-conv__badge {
    flex: 0 0 auto;
    background: #1976d2;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================================
   Columna 2 — Hilo
   ============================================================================ */
.cht-hilo {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.cht-hilo__vacio {
    margin: auto;
    text-align: center;
    color: #8b95ab;
    padding: 32px;
}
.cht-hilo__vacio i {
    font-size: 60px;
    color: #cbd3e3;
    margin-bottom: 16px;
    display: block;
}
.cht-hilo__vacio-t {
    font-size: 17px;
    font-weight: 700;
    color: #5c6884;
    margin-bottom: 6px;
}
.cht-hilo__vacio span { font-size: 13.5px; }

.cht-hilo__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid var(--cht-linea);
}
.cht-hilo__atras { flex: 0 0 auto; }
.cht-hilo__ava { position: relative; flex: 0 0 auto; }
.cht-hilo__head-info { flex: 1 1 0; min-width: 0; }
.cht-hilo__head-name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.cht-hilo__head-nom {
    font-weight: 700;
    font-size: 16px;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Estado junto al nombre: quien la atiende, de un vistazo. */
.cht-estado-pill {
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
}
.cht-estado-pill--sin { background: #fdf0c8; color: #8a6400; }
.cht-estado-pill--atencion { background: #e3f2e5; color: #2e7d32; }
.cht-estado-pill--cerrada { background: #eceef3; color: #6b7488; }
.cht-hilo__head-id {
    font-size: 12.5px;
    color: #8b95ab;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cht-hilo__head-acc {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Botones de accion de la cabecera (Asignar automatico / Asignarmela). */
.cht-hbtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, filter .15s;
}
.cht-hbtn i { font-size: 12px; }
.cht-hbtn--pri { background: #1976d2; border: 1px solid #1976d2; color: #fff; }
.cht-hbtn--pri:hover { filter: brightness(1.08); }
.cht-hbtn--sec { background: #fff; border: 1px solid #d5dbe6; color: #263243; }
.cht-hbtn--sec:hover { background: #f5f7fb; }
.cht-iconbtn--caja { border: 1px solid #d5dbe6; background: #fff; width: 36px; height: 36px; }
/* Con el panel abierto, por debajo de ~1340 px el texto de los botones le quitaba todo el ancho al nombre:
   quedan solo con el icono (el title dice que hacen). No se usa container query: su contencion de layout
   convertiria al hilo en el bloque contenedor del visor de imagenes (position: fixed). */
@media (max-width: 1339px) {
    .cht-hbtn__t { display: none; }
    .cht-hbtn { padding: 0 11px; }
}

/* Aviso bajo la cabecera: nadie la atiende, o la atiende otro asesor. */
.cht-aviso {
    flex: 0 0 auto;
    padding: 9px 18px;
    font-size: 13px;
    border-bottom: 1px solid;
    display: flex;
    flex-wrap: wrap;
    gap: 0 5px;
}
.cht-aviso--nadie { background: #fff6dc; border-color: #f1e2b3; color: #6b5414; }
.cht-aviso--nadie b { color: #5b4510; }
.cht-aviso--otro { background: #eef4fd; border-color: #d6e4f7; color: #2c4a73; }

/* "Llego desde ..." al comienzo de la conversacion: clic = ver las que llegaron por ahi. */
.cht-origen-marca { display: flex; justify-content: center; margin: 2px 0 10px; }
.cht-origen-marca button {
    border: 1px dashed #c9d0dd;
    background: #fff;
    color: #44506a;
    border-radius: 8px;
    padding: 5px 14px;
    font-size: 12.5px;
    cursor: pointer;
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cht-origen-marca button:hover { border-color: var(--cht-dorado); color: #6b5414; }

.cht-conn {
    font-size: 11.5px;
    font-weight: 600;
    color: #2e7d32;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(46, 125, 50, .1);
}
.cht-conn i { font-size: 7px; }
.cht-conn.off {
    color: #c77700;
    background: rgba(199, 119, 0, .1);
}

.cht-hilo__body {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 18px;
    background:
        radial-gradient(circle at 20% 10%, rgba(44, 82, 130, .03), transparent 40%),
        linear-gradient(180deg, #f0f2f7 0%, #eef1f6 100%);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* ── C7: scroll infinito hacia arriba ── */
.cht-sentinel-top {
    height: 1px;
    flex: 0 0 auto;
}
.cht-cargando-mas {
    text-align: center;
    font-size: 12px;
    color: #77839a;
    padding: 8px 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

/* Separador de fecha */
.cht-sep {
    text-align: center;
    margin: 10px 0;
}
.cht-sep span {
    display: inline-block;
    background: #fff;
    color: #6b7488;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(30, 58, 95, .08);
}

/* Burbujas */
.cht-bub-row {
    display: flex;
    margin: 1px 0;
}
.cht-bub-row--ent { justify-content: flex-start; }
.cht-bub-row--sal { justify-content: flex-end; }

.cht-bub {
    max-width: 72%;
    padding: 7px 11px 5px;
    border-radius: 10px;
    box-shadow: 0 1px 1.5px rgba(30, 58, 95, .1);
    position: relative;
}
.cht-bub--ent {
    background: #fff;
    border-top-left-radius: 2px;
}
.cht-bub--sal {
    background: #dcebff;
    border-top-right-radius: 2px;
}
.cht-bub--bot {
    background: #dcebff;
    border-top-right-radius: 2px;
}

/* C7: nota interna — visualmente distinta de un mensaje real (nunca llega al cliente). */
.cht-bub--nota {
    background: #fff8e1;
    border: 1px dashed rgba(154, 116, 8, .35);
    border-top-right-radius: 2px;
}
.cht-bub__nota-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #8a6d1a;
    margin-bottom: 4px;
}

.cht-bub__botchip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #8a6d1a;
    background: rgba(212, 175, 55, .22);
    padding: 1px 7px;
    border-radius: 999px;
    margin-bottom: 4px;
}

.cht-bub__txt {
    font-size: 13.5px;
    line-height: 1.4;
    color: #1f2937;
    white-space: pre-wrap;
    word-break: break-word;
}
.cht-bub__media {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #44506a;
    background: rgba(30, 58, 95, .05);
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 4px;
}
.cht-bub__media--off { color: #8b95ab; font-style: italic; }

/* C3-B: multimedia real */
.cht-media-img {
    display: block;
    margin-bottom: 4px;
    line-height: 0;
}
.cht-media-img img {
    max-width: 280px;
    max-height: 320px;
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
    cursor: zoom-in;
}
.cht-media-audio {
    display: block;
    max-width: 260px;
    height: 40px;
    margin-bottom: 4px;
}
.cht-media-doc {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    background: rgba(30, 58, 95, .05);
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 4px;
    min-width: 190px;
}
.cht-media-doc:hover { background: rgba(30, 58, 95, .09); }
.cht-media-doc__ico {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
}
.cht-doc--pdf { background: #c62828; }
.cht-doc--xls { background: #2e7d32; }
.cht-doc--doc { background: #2c5282; }
.cht-doc--gen { background: #607089; }
.cht-media-doc__info { display: flex; flex-direction: column; min-width: 0; }
.cht-media-doc__name {
    font-size: 13px;
    color: #1f2937;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cht-media-doc__act { font-size: 11px; color: #2c5282; }

.cht-bub__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 2px;
}
.cht-bub__hora {
    font-size: 10.5px;
    color: #90a0b8;
}

.cht-tick { font-size: 11px; }
.cht-tick--pend { color: #a9b3c6; }
.cht-tick--env { color: #a9b3c6; }
.cht-tick--err { color: #c62828; }
.cht-tick--entr { color: #90a0b8; }
.cht-tick--leido { color: #4fc3f7; }
.cht-tick--entr i, .cht-tick--leido i { margin-left: -6px; }
.cht-tick--entr i:first-child, .cht-tick--leido i:first-child { margin-left: 0; }

/* WhatsApp todavia no confirmo la entrega. Ambar, no rojo: es un dato (el telefono del cliente
   puede estar apagado), no un error — y desaparece solo cuando llega el ack. */
.cht-tick--sinconf {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 10px;
    background: #fbf2e2;
    color: #c77700;
    border: 1px solid #e8d2a3;
    font-size: 11px;
    white-space: nowrap;
}

/* Composer — el bloque cerrado (.cht-composer--off) usa la base; el activo vive dentro de .cht-composer-wrap. */
.cht-composer {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 14px;
    background: #fff;
    border-top: 1px solid var(--cht-linea);
}
.cht-composer__input {
    flex: 1 1 0;
    resize: none;
    border: none;
    border-radius: 0;
    padding: 9px 6px;
    font-size: 14px;
    line-height: 1.35;
    font-family: inherit;
    outline: none;
    max-height: 120px;
    background: transparent;
    color: #263243;
}
/* El texto de ayuda en una linea: partido en dos agrandaba el cuadro con una barra de scroll vacia. */
.cht-composer__input::placeholder {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #8b95ab;
}
.cht-composer--off {
    justify-content: center;
    gap: 8px;
    color: #8b95ab;
    font-size: 13px;
    background: var(--cht-fondo);
}
/* Boton para reabrir una conversacion cerrada desde el composer deshabilitado. */
.cht-composer__reabrir {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: none;
    border-radius: 16px;
    background: var(--primario, #284A70);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.cht-composer__reabrir:hover { filter: brightness(1.12); }

.cht-composer-wrap {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    padding: 10px 20px 14px;
    background: #fff;
    border-top: 1px solid var(--cht-linea);
}
.cht-composer-wrap .cht-composer {
    align-items: center;
    gap: 8px;
    padding: 5px 5px 5px 8px;
    border: 1px solid #d5dbe6;
    border-radius: 10px;
    transition: border-color .15s, box-shadow .15s;
}
.cht-composer-wrap .cht-composer:focus-within {
    border-color: #90b4e6;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, .1);
}

/* Responder / Nota interna */
.cht-comp-tabs {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
.cht-comp-tab {
    border: 1px solid transparent;
    background: #eef1f6;
    color: #44506a;
    font-size: 13.5px;
    font-weight: 600;
    padding: 5px 14px;
    cursor: pointer;
}
.cht-comp-tab:first-child { border-radius: 8px 0 0 8px; }
.cht-comp-tab:nth-child(2) { border-radius: 0 8px 8px 0; }
.cht-comp-tab.on {
    background: #fff;
    border-color: #d5dbe6;
    color: #1565c0;
}
.cht-comp-tab--nota.on { color: #8a6d1a; border-color: #ecd9a3; background: #fffaf0; }
.cht-comp-canal { margin-left: 12px; font-size: 12.5px; color: #8b95ab; }

.cht-comp-mas {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #56637a;
    font-size: 14px;
    cursor: pointer;
    margin: 0;
}
.cht-comp-mas:hover { background: #f1f4f9; color: #1f2937; }
.cht-comp-btn {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #d5dbe6;
    border-radius: 7px;
    background: #fff;
    color: #263243;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.cht-comp-btn:hover { background: #f5f7fb; }
.cht-comp-enviar {
    flex: 0 0 auto;
    height: 38px;
    min-width: 84px;
    padding: 0 18px;
    border: none;
    border-radius: 8px;
    background: #1976d2;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s, opacity .15s;
}
.cht-comp-enviar:hover:not(:disabled) { filter: brightness(1.08); }
.cht-comp-enviar:disabled { opacity: .45; cursor: default; }
.cht-comp-enviar--nota { background: #8a6d1a; }

/* Nota interna: el cuadro se tiñe para que nunca se confunda con un mensaje al cliente. */
.cht-composer-wrap .cht-composer--nota { background: #fffaf0; border-color: #ecd9a3; }
.cht-composer-wrap .cht-composer--nota:focus-within { border-color: #d4af37; box-shadow: 0 0 0 3px rgba(212, 175, 55, .15); }

/* Canal sin envio desde el ERP (Instagram, Telegram). */
.cht-comp-aviso {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px dashed #d5dbe6;
    border-radius: 10px;
    background: #f8f9fc;
    font-size: 13px;
    color: #56637a;
}
.cht-comp-aviso i { color: #8b95ab; }
.cht-comp-aviso .cht-comp-btn { margin-left: auto; }

/* C7: popup de plantillas (atajo '/' o boton Plantillas) */
.cht-plant-popup {
    position: absolute;
    bottom: 100%;
    left: 20px;
    width: min(520px, calc(100% - 40px));
    margin-bottom: 6px;
    background: #fff;
    border: 1px solid var(--cht-linea);
    border-radius: 12px;
    box-shadow: 0 -8px 28px rgba(20, 30, 48, .16);
    max-height: 320px;
    overflow-y: auto;
    z-index: 15;
}
.cht-plant-popup__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    color: #77839a;
    padding: 12px 16px 6px;
}
.cht-plant-popup__x {
    border: none;
    background: transparent;
    color: #77839a;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
}
.cht-plant-popup__x:hover { background: #f1f4f9; color: #1f2937; }
.cht-plant-popup__vacio {
    padding: 12px 16px 16px;
    font-size: 12.5px;
    color: #8b95ab;
}
.cht-plant-popup__lista {
    display: flex;
    flex-direction: column;
    padding-bottom: 6px;
}
.cht-plant-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 16px;
    cursor: pointer;
}
.cht-plant-item:hover { background: #f5f7fb; }
.cht-plant-item__titulo {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}
.cht-plant-item__atajo {
    margin-left: 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: #8b95ab;
}
.cht-plant-item__prev {
    font-size: 12.5px;
    color: #77839a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* C3-B: adjuntar */
.cht-file-hidden { display: none; }

.cht-adj {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 8px;
}
.cht-adj__thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    flex: 0 0 auto;
}
.cht-adj__ico {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--cht-fondo);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cht-azul-med);
    font-size: 18px;
    flex: 0 0 auto;
}
.cht-adj__name {
    flex: 1 1 auto;
    font-size: 13px;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cht-adj__x {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: #8b95ab;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}
.cht-adj__x:hover:not(:disabled) { background: rgba(198, 40, 40, .1); color: #c62828; }
.cht-adj-err {
    padding: 6px 14px;
    font-size: 12px;
    color: #c62828;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ============================================================================
   Columna 3 — Panel de contacto
   ============================================================================ */
.cht-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
}
/* La cabecera "Contacto" solo hace falta en el telefono (cajon con boton de cerrar). */
.cht-panel__head {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--cht-linea);
}
.cht-panel__head-t {
    font-weight: 700;
    font-size: 14px;
    color: var(--cht-azul-osc);
}
.cht-panel__cerrar { display: none; }

.cht-panel__vacio {
    padding: 40px 20px;
    text-align: center;
    color: #9aa4b8;
    font-size: 13px;
}

.cht-panel__card {
    padding: 22px 16px 18px;
    text-align: center;
    border-bottom: 1px solid #f1f3f8;
}
.cht-panel__ava {
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
}
.cht-panel__nombre {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
}
.cht-panel__id {
    font-size: 13px;
    color: #77839a;
    margin-top: 2px;
}
/* Secciones del panel (Cliente en el ERP · Oportunidad · Atencion). Los paneles de contexto (.cht-panel__crm)
   se ven igual: una seccion mas, con titulo en versalitas. */
.cht-psec,
.cht-panel__crm {
    padding: 16px 20px;
    border-bottom: 1px solid #eef1f6;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cht-psec__t,
.cht-panel__crm-t {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #56637a;
    margin-bottom: 2px;
}
.cht-psec__txt,
.cht-panel__crm-x {
    font-size: 13px;
    color: #56637a;
    line-height: 1.45;
}
.cht-psec__dato {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cht-psec__dato i { color: #2e7d32; font-size: 13px; }
.cht-psec__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.cht-psec__row--top { align-items: flex-start; }
.cht-psec__lbl {
    flex: 0 0 auto;
    font-size: 13px;
    color: #77839a;
}
.cht-psec__val {
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.cht-psec__link {
    border: none;
    background: transparent;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: #1f2937;
    text-align: right;
    cursor: pointer;
}
.cht-psec__link:hover { color: #1565c0; text-decoration: underline; }
.cht-psec__url {
    max-width: 100%;
    font-size: 12px;
    font-weight: 400;
    color: #1976d2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cht-psec__url:hover { color: #1565c0; }

/* Oportunidad del CRM: barra de etapas (un tramo por etapa del equipo) y la etapa siguiente. */
.cht-crm-barra { display: flex; gap: 4px; margin-top: 2px; }
.cht-crm-barra__tramo {
    flex: 1 1 0;
    height: 6px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: #e3e7ef;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.cht-crm-barra__tramo.on { background: #1976d2; }
.cht-crm-barra__tramo:hover:not(:disabled) { background: #90b4e6; }
.cht-crm-barra__tramo:disabled { cursor: default; }
.cht-crm-etapa {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
    color: #1f2937;
}
.cht-crm-etapa b { flex: 0 0 auto; white-space: nowrap; }
.cht-crm-etapa span { min-width: 0; font-size: 13px; color: #77839a; text-align: right; }
.cht-crm-crear {
    width: 100%;
    padding: 10px;
    border: 1px dashed #b9c6da;
    border-radius: 8px;
    background: #fff;
    color: #1565c0;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}
.cht-crm-crear:hover:not(:disabled) { background: #f3f8fe; border-color: #1976d2; }
.cht-crm-otras { margin-top: 4px; }
.cht-crm-ver { align-self: flex-start; font-size: 12.5px; color: #1565c0; }

/* ── C5: puente CRM — panel de contacto inteligente ── */
.cht-crm-feedback {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: #1b5e20;
    background: rgba(46, 125, 50, .1);
    border: 1px solid rgba(46, 125, 50, .25);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
}
.cht-crm-feedback__x {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: inherit;
}

.cht-crm-card {
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid var(--cht-linea);
}
.cht-crm-card--cliente {
    border-color: rgba(46, 125, 50, .3);
    background: rgba(46, 125, 50, .06);
}
.cht-crm-card__t {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #2e7d32;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.cht-crm-card__nombre {
    font-size: 13.5px;
    font-weight: 700;
    color: #1f2937;
}
.cht-crm-card__row {
    font-size: 12px;
    color: #56637a;
    margin-top: 2px;
}

.cht-crm-sect-t {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--cht-azul-med);
    margin: 4px 0 6px;
}

.cht-crm-oplist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.cht-crm-op {
    border: 1px solid var(--cht-linea);
    border-radius: 10px;
    padding: 9px 10px;
    background: #fff;
}
.cht-crm-op--vinculada {
    border-color: rgba(212, 175, 55, .5);
    background: rgba(212, 175, 55, .08);
}
.cht-crm-op__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.cht-crm-op__etapa {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--cht-azul-med);
    padding: 2px 8px;
    border-radius: 999px;
}
.cht-crm-op__monto {
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
}
.cht-crm-op__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #8b95ab;
    margin-top: 4px;
}
.cht-crm-op__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #8a6d1a;
    margin-top: 6px;
}
.cht-crm-btn-sm {
    margin-top: 7px;
    padding: 5px 10px !important;
    font-size: 12px !important;
    width: auto !important;
}

.cht-crm-verlink {
    border: none;
    background: transparent;
    color: var(--cht-azul-med);
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0 10px;
    cursor: pointer;
}
.cht-crm-verlink:hover { color: var(--cht-primario); text-decoration: underline; }

/* Backdrop del drawer movil */
.cht-panel-backdrop {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(20, 30, 48, .35);
    z-index: 25;
}

/* ============================================================================
   Responsive <900px — una columna a la vez + panel como drawer
   ============================================================================ */
@media (max-width: 900px) {
    .cht-bandeja,
    .cht-bandeja--panel-off {
        grid-template-columns: 1fr;
    }
    .cht-col--lista,
    .cht-col--hilo {
        grid-column: 1;
        grid-row: 1;
    }
    .cht-bandeja--m-lista .cht-col--hilo { display: none; }
    .cht-bandeja--m-lista .cht-col--lista { display: flex; }
    .cht-bandeja--m-hilo .cht-col--lista { display: none; }
    .cht-bandeja--m-hilo .cht-col--hilo { display: flex; }

    .cht-col--panel {
        display: flex !important;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 300px;
        max-width: 85%;
        z-index: 30;
        box-shadow: -6px 0 20px rgba(20, 30, 48, .2);
        transform: translateX(100%);
        transition: transform .25s ease;
    }
    .cht-bandeja--drawer-on .cht-col--panel {
        transform: translateX(0);
    }
    .cht-bandeja--m-lista .cht-col--panel { display: none !important; }

    .cht-panel__head { display: flex; }
    .cht-panel__cerrar { display: inline-flex; }
    .cht-bandeja--drawer-on .cht-panel-backdrop { display: block; }

    /* Cabecera del chat en el telefono: mas compacta (los botones ya van solo con icono). El avatar se oculta:
       con la flecha de volver y cinco botones, el nombre del cliente se quedaba sin lugar. */
    .cht-hilo__head { gap: 8px; padding: 10px 10px; }
    .cht-hilo__head .cht-hilo__ava { display: none; }
    /* La pildora de estado le quitaba el ancho al nombre; el subtitulo ya dice "Sin asesor" / "Atiende X". */
    .cht-hilo__head .cht-estado-pill { display: none; }
    .cht-hilo__head-acc { gap: 4px; }
    .cht-composer-wrap { padding: 8px 10px 10px; }

    /* Targets tactiles mas amplios */
    .cht-iconbtn { width: 40px; height: 40px; }
}

/* ============================================================================
   Multi-asesor (C4) — combo de cola en la lista, chip de cola/asesor por item
   ============================================================================ */
.cht-conv__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.cht-conv__asesor {
    font-size: 11px;
    color: #8b95ab;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cht-conv__asesor i { font-size: 10px; }

/* ============================================================================
   Modal transferir (C4) — overlay simple, sin transform/filter en ancestros
   para no romper el position:fixed (regla dura del proyecto).
   ============================================================================ */
.cht-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 30, 48, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 16px;
}
.cht-modal {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 14px;
    border-top: 3px solid var(--cht-dorado, #d4af37);
    box-shadow: 0 20px 50px rgba(20, 30, 48, .3);
    overflow: hidden;
}
.cht-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--cht-azul-osc, #1e3a5f);
}
.cht-modal__title {
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.cht-modal__head .cht-iconbtn {
    color: #fff;
    width: 30px;
    height: 30px;
}
.cht-modal__head .cht-iconbtn:hover { background: rgba(255,255,255,.15); color: #fff; }
.cht-modal__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cht-modal__lbl {
    font-size: 12px;
    font-weight: 700;
    color: #56637a;
    margin-top: 8px;
}
.cht-modal__lbl:first-child { margin-top: 0; }
.cht-modal__select,
.cht-modal__textarea {
    width: 100%;
    font-size: 13.5px;
    padding: 9px 11px;
    border-radius: 9px;
    border: 1px solid var(--cht-linea);
    font-family: inherit;
    color: #263243;
}
.cht-modal__select:focus,
.cht-modal__textarea:focus {
    outline: none;
    border-color: var(--cht-azul-med);
}
.cht-modal__textarea { resize: vertical; }
.cht-modal__hint {
    font-size: 12px;
    color: #56637a;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* Aviso del combo de asesores vacio: dice DONDE se arregla, no solo que esta vacio. */
.cht-modal__hint--warn {
    align-items: flex-start;
    margin-top: 4px;
    padding: 6px 9px;
    border-radius: 6px;
    background: #fff8e6;
    border: 1px solid #f0dfb4;
    color: #8a6100;
    line-height: 1.45;
}
.cht-modal__error {
    font-size: 12.5px;
    color: #c62828;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cht-modal__foot {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid var(--cht-linea);
    background: var(--cht-fondo, #f5f7fb);
}
.cht-modal__foot .cht-btn { width: auto; flex: 1 1 0; }

/* ============================================================================
   V2-3 — SLA "sin responder" + lightbox + chips rapidas
   ============================================================================ */

/* Header: titulo + pildora "N sin responder" */
.cht-lista__titlerow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.cht-lista__titlerow .cht-lista__title { margin-bottom: 0; }
.cht-pill-sinresp {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    background: #fde8e8;
    color: #c62828;
    white-space: nowrap;
}

/* "espera 3 d": cuanto lleva el cliente sin respuesta, con el color del SLA de la conexion. */
.cht-espera {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.cht-espera--rojo { color: #c62828; }
.cht-espera--naranja { color: #c77700; }
.cht-espera--gris { color: #77839a; }

/* Tercera linea de la fila: por donde llego ("Anuncio · Demo ERP gratis"). */
.cht-conv__origen {
    min-width: 0;
    font-size: 12px;
    color: #8b95ab;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cht-lista__vacio-btn {
    margin-top: 12px;
    border: 1px solid #d5dbe6;
    background: #fff;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: #1565c0;
    cursor: pointer;
}
.cht-lista__vacio-btn:hover { background: #f3f8fe; }

/* Lightbox modal de imagen */
.cht-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(15, 23, 38, .88);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    cursor: zoom-out;
}
.cht-lightbox__img {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: 8px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .5);
    cursor: default;
}
.cht-lightbox__bar {
    position: absolute;
    top: 16px;
    right: 20px;
    display: flex;
    gap: 10px;
}
.cht-lightbox__btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s;
}
.cht-lightbox__btn:hover { background: rgba(255, 255, 255, .28); }

/* La burbuja de imagen ahora es un <button>: resetear estilos nativos */
button.cht-media-img {
    border: none;
    background: transparent;
    padding: 0;
    cursor: zoom-in;
}

/* ══ Plan Chat Conexiones: pestañas por conexion en la columna de la lista ══
   Una pestaña por numero/pagina cuando hay mas de una conexion; "Todas" solo para el supervisor.
   La pestaña activa toma el color de la conexion (--cht-tab-color) para que se lea de un vistazo. */
.cht-tabs-conex {
    display: flex;
    gap: 4px;
    padding: 8px 10px 0 10px;
    overflow-x: auto;
    scrollbar-width: thin;
    border-bottom: 1px solid #e6e9f0;
    background: #fff;
}

.cht-tab-conex {
    --cht-tab-color: #1e3a5f;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px 9px 11px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #56637a;
    font-size: 12.5px;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 8px 8px 0 0;
    transition: background .12s, color .12s;
}

.cht-tab-conex:hover { background: #f3f5f9; color: #1d2939; }

.cht-tab-conex.on {
    color: var(--cht-tab-color);
    border-bottom-color: var(--cht-tab-color);
    font-weight: 700;
}

.cht-tab-conex i { font-size: 14px; }
.cht-tab-conex__txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.cht-tab-conex__nom { font-size: 12.5px; }
.cht-tab-conex__id { font-size: 10.5px; font-weight: 500; color: #8b95ab; letter-spacing: .2px; }
.cht-tab-conex.on .cht-tab-conex__id { color: inherit; opacity: .75; }

/* Chip de conexion en la fila (solo en la pestaña "Todas", donde se mezclan conexiones) */
.cht-conex-chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .2px;
}