/* Canales vinculados (js/canales.js): logos de cada canal, lista de chats y chat en vivo. */
.cn-alerta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 14px; margin: 0 0 16px; border-radius: var(--r-sm); background: #FFF8E6; border: 1px solid #F1DFA8; color: #6B5310; font-size: 13.5px; }
.cn-alerta .ic { width: 18px; height: 18px; flex-shrink: 0; }
.cn-alerta span { flex: 1; min-width: 220px; }
.cn-alerta.is-demo { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-ink); }
.cn-alerta.is-mal { background: color-mix(in oklab, var(--danger) 7%, white); border-color: color-mix(in oklab, var(--danger) 25%, white); color: var(--danger); }
.cn-ok { display: flex; align-items: center; gap: 8px; color: var(--ok); font-weight: 550; }

/* ---------- Tarjetas con los logos ---------- */
.cn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 18px; }
.cn-card { position: relative; display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 14px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .15s; font: inherit; color: inherit; }
.cn-card:hover { border-color: var(--line-2); box-shadow: 0 6px 18px -8px rgba(16, 24, 40, .18); }
.cn-card:active { transform: translateY(1px); }
.cn-card.is-on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.cn-card.is-off .cn-logo { filter: saturate(.25); opacity: .7; }
.cn-logo { width: 44px; height: 44px; flex-shrink: 0; display: block; }
.cn-logo svg { width: 100%; height: 100%; display: block; }
.cn-card-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cn-card-txt b { font-size: 14.5px; font-weight: 650; }
.cn-card-txt small { color: var(--mute); font-size: 12px; line-height: 1.35; }
.cn-card-est { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--ink-2); font-weight: 550; }
.cn-dot { width: 8px; height: 8px; border-radius: 50%; background: #B8BDC6; display: inline-block; }
.cn-dot.is-ok { background: #22B455; box-shadow: 0 0 0 3px color-mix(in oklab, #22B455 18%, white); }
.cn-card-n { position: absolute; top: 10px; right: 10px; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 700; display: grid; place-items: center; }
.cn-card-n.is-espera { background: #E8590C; }
.cn-ayuda { display: flex; align-items: center; gap: 8px; }

.cn-como { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--card); border: 1px dashed var(--line-2); font-size: 13px; }
.cn-como summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.cn-como ol { margin: 10px 0 6px; padding-left: 20px; display: grid; gap: 5px; }
.cn-como code { font-size: 12px; background: var(--bg); padding: 2px 6px; border-radius: 5px; word-break: break-all; }

/* ---------- Lista de chats + chat ---------- */
.cn-panel { display: grid; grid-template-columns: minmax(250px, 340px) 1fr; height: calc(100dvh - 210px); min-height: 460px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.cn-lista { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.cn-lista-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.cn-lista-head .link { background: none; border: 0; cursor: pointer; }
#cnLista { overflow-y: auto; flex: 1; }
.cn-vacio { padding: 16px; }
.cn-item { display: flex; gap: 10px; width: 100%; padding: 11px 14px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.cn-item:hover { background: #FAFBFC; }
.cn-item.is-on { background: var(--brand-soft); }
.cn-item.is-nuevo b { font-weight: 700; }
.cn-av { position: relative; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: #E9EBEF; color: var(--ink-2); display: grid; place-items: center; font-size: 13px; font-weight: 650; }
.cn-av-logo { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 5px; box-shadow: 0 0 0 2px var(--card); overflow: hidden; }
.cn-av-logo svg { width: 100%; height: 100%; display: block; }
.cn-item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cn-item-top { display: flex; justify-content: space-between; gap: 8px; }
.cn-item-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cn-item-top small { color: var(--mute); font-size: 11.5px; flex-shrink: 0; }
.cn-item-ult { color: var(--mute); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-item-pie { display: flex; align-items: center; justify-content: space-between; margin-top: 3px; }
.cn-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: #22B455; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.cn-est { display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; }
.cn-est .ic { width: 13px; height: 13px; }
.cn-est.is-ia { background: #EEF2FF; color: #3B4CC0; }
.cn-est.is-espera { background: #FFF0E5; color: #B54708; }
.cn-est.is-humano { background: #E8F6EE; color: #17803D; }

.cn-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #F3F1EC; }
.cn-chat-in { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cn-chat-vacio { flex: 1; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--mute); }
.cn-chat-vacio .ic { width: 34px; height: 34px; opacity: .5; }
.cn-chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--card); border-bottom: 1px solid var(--line); }
.cn-chat-tit { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cn-chat-tit b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-chat-tit small { color: var(--mute); font-size: 12px; }
.cn-atras { display: none; }
.cn-banda { padding: 7px 14px; font-size: 12.5px; background: #EEF2FF; color: #3B4CC0; border-bottom: 1px solid var(--line); }
.cn-banda.is-espera { background: #FFF0E5; color: #8A3A06; }
.cn-banda.is-humano { background: #E8F6EE; color: #10632F; }
.cn-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.cn-msg { max-width: min(78%, 560px); padding: 8px 11px 6px; border-radius: 12px; background: #fff; box-shadow: 0 1px 1px rgba(16, 24, 40, .08); display: flex; flex-direction: column; gap: 3px; align-self: flex-start; font-size: 13.5px; }
.cn-msg small { align-self: flex-end; color: var(--mute); font-size: 10.5px; }
.cn-msg.is-ia { align-self: flex-end; background: #E7EBFF; }
.cn-msg.is-asesor { align-self: flex-end; background: #DCF5E3; }
.cn-quien { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 650; color: #3B4CC0; }
.cn-quien .ic { width: 12px; height: 12px; }
.cn-msg.is-asesor .cn-quien { color: #17803D; }
.cn-txt { white-space: normal; overflow-wrap: anywhere; }
.cn-img { max-width: 240px; max-height: 260px; border-radius: 8px; display: block; background: #eee; min-height: 60px; }
.cn-audio { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.cn-audio .ic { width: 13px; height: 13px; }
.cn-sis { align-self: center; max-width: 90%; text-align: center; padding: 5px 10px; border-radius: 8px; background: rgba(255, 255, 255, .7); color: var(--ink-2); font-size: 12px; }
.cn-escribe { align-self: flex-end; display: flex; gap: 4px; padding: 10px 12px; border-radius: 12px; background: #E7EBFF; }
.cn-escribe[hidden] { display: none; }
.cn-escribe span { width: 6px; height: 6px; border-radius: 50%; background: #6B78D6; animation: cnPunto 1s infinite; }
.cn-escribe span:nth-child(2) { animation-delay: .15s; }
.cn-escribe span:nth-child(3) { animation-delay: .3s; }
@keyframes cnPunto { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.cn-comp { display: flex; gap: 8px; padding: 10px 12px 4px; background: var(--card); border-top: 1px solid var(--line); }
.cn-comp textarea { flex: 1; resize: none; min-height: 38px; max-height: 140px; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line-2); font: inherit; outline: 0; }
.cn-comp textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.cn-comp .btn { width: 42px; padding: 0; flex-shrink: 0; }
.cn-comp.is-cliente { border-top: 1px dashed var(--line-2); padding-bottom: 10px; background: #FBFAF7; }
.cn-comp-nota { margin: 0; padding: 0 14px 8px; font-size: 11.5px; background: var(--card); }

/* Modales */
.cn-chks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.cn-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.cn-chk.is-main { width: 100%; }
.field .cn-chk input[type=checkbox] { width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0; flex: none; box-shadow: none; accent-color: var(--brand); }
.cn-uso { margin-top: 14px; }
.cn-prueba { height: 300px; border-radius: var(--r-sm); background: #F3F1EC; margin-bottom: 10px; border: 1px solid var(--line); }
.cn-lista-ayuda { margin: 10px 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; }

@media (max-width: 760px) {
  .cn-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cn-card { flex-direction: column; gap: 8px; padding: 12px; }
  .cn-card-txt small { display: none; }
  .cn-logo { width: 38px; height: 38px; }
  .cn-panel { grid-template-columns: 1fr; height: calc(100dvh - 140px); }
  .cn-panel.con-chat .cn-lista { display: none; }
  .cn-panel:not(.con-chat) .cn-chat { display: none; }
  .cn-atras { display: grid; }
  .cn-lista { border-right: 0; }
  .cn-msg { max-width: 88%; }
  .cn-chat-head .btn span, .cn-chat-head .btn { font-size: 12.5px; }
}
/* En el celular, con un chat abierto (por ejemplo desde un aviso), el chat ocupa la pantalla. */
@media (max-width: 760px) {
  .cn-vista.con-chat > :not(.cn-panel) { display: none; }
  .cn-vista.con-chat .cn-panel { height: calc(100dvh - 96px); min-height: 380px; }
}
.cn-plant { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--card); border-top: 1px solid var(--line); }
.cn-plant .cn-comp-nota { padding: 0; }
.cn-plant select, .cn-plant input { padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line-2); font: inherit; outline: 0; }
.cn-plant select:focus, .cn-plant input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.cn-plant #cnPlantVars { display: flex; flex-direction: column; gap: 6px; }
.cn-plant-vista { white-space: pre-wrap; font-size: 13px; padding: 8px 10px; border-radius: 9px; background: #FBFAF7; }
.cn-plant-vista:empty { display: none; }