/* =====================================================================
   Hub de Comunicaciones · módulo de Mensajes (SPEC-MENSAJES §10)
   .cv-  Conversaciones (bandeja unificada)          js/vistas/conversaciones.js
   .cm-  Configuración › Meta                         js/vistas/config-meta.js
   .pn-ms-  Panel: mensajes por canal                 js/vistas/panel.js
   .fi-cv-  Ficha del prospecto: conversaciones       js/vistas/ficha.js
   Usa los tokens de css/tlc.css. Colores de canal: sin logos de marca, solo íconos lineales propios.
   ===================================================================== */

:root {
  --cv-wa: #2A7550; --cv-wa-claro: #E5F3EB;
  --cv-ms: #2E6DB4; --cv-ms-claro: #E6EFF9;
  --cv-ig: #8A6206; --cv-ig-claro: #FDF3D8;
  --cv-cm: #1C2B5E; --cv-cm-claro: #E8ECF6;
}

/* ---------- Ícono del canal (en avatar, lista y encabezados) ---------- */
.cv-canal-ic { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--cv-wa-claro); color: var(--cv-wa); flex: none; }
.cv-canal-ic .ico { width: 12px; height: 12px; }
.cv-canal-ic.c-ms { background: var(--cv-ms-claro); color: var(--cv-ms); }
.cv-canal-ic.c-ig { background: var(--cv-ig-claro); color: var(--cv-ig); }
.cv-canal-ic.c-cf, .cv-canal-ic.c-ci { background: var(--cv-cm-claro); color: var(--cv-cm); }
.cv-av { position: relative; flex: none; display: inline-flex; align-self: flex-start; height: max-content; }
.cv-av .avatar { width: 40px; height: 40px; font-size: 13px; }
.cv-av.g .avatar { width: 46px; height: 46px; font-size: 15px; }
.cv-av-canal { position: absolute; right: -4px; bottom: -3px; width: 19px; height: 19px; box-shadow: 0 0 0 2px #fff; }
.cv-av-canal .ico { width: 11px; height: 11px; }

/* ---------- Franja de estado ---------- */
.cv { display: flex; flex-direction: column; gap: 14px; }
.cv-estado { display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; padding: 14px 18px; background: #fff; border: 1px solid var(--tlc-border); border-radius: var(--radio-l); box-shadow: var(--sombra); }
.cv-estado-meta { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 0 1 290px; }
.cv-estado-sub { font-size: 12px; color: var(--tlc-tinta-3); line-height: 1.35; }
.cv-estado-sub a { font-weight: 700; }
.cv-estado-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--tlc-cream-2); color: var(--tlc-tinta-3); border: 1px solid var(--tlc-border); }
.cv-estado-ic.ok { background: var(--tlc-exito-claro); color: var(--tlc-exito); border-color: #CBE6D6; }
.cv-estado-ic.mal { background: var(--tlc-peligro-claro); color: var(--tlc-peligro); border-color: #F3C9C6; }
.cv-estado-ic .ico { width: 19px; height: 19px; }
.cv-estado-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cv-estado-txt small { font-family: var(--tlc-titulo); font-weight: 800; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--tlc-tinta-3); }
.cv-estado-txt b { font-size: 14px; color: var(--tlc-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-estado-conf { flex: none; margin-left: auto; }
.cv-estado-ints { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; flex: 0 1 auto; }
.cv-int { display: flex; align-items: center; gap: 9px; }
.cv-int-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--tlc-cream-2); color: var(--tlc-navy); flex: none; }
.cv-int-ic .ico { width: 16px; height: 16px; }
.cv-int-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cv-int-txt > b { font-size: 12.5px; color: var(--tlc-navy); line-height: 1.2; }
.cv-int-txt .int-canal { gap: 7px; }
.cv-int-txt .int-canal .interruptor { width: 34px; height: 20px; }
.cv-int-txt .int-canal .interruptor::after { width: 14px; height: 14px; }
.cv-int-txt .int-canal .interruptor:checked::after { transform: translateX(14px); }
.cv-int-txt .int-canal-txt { font-size: 11.5px; }

.cv-avisos:empty { display: none; }
.cv-avisos { display: flex; flex-direction: column; gap: 10px; }
.cv-aviso { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 16px; border-radius: var(--radio); border: 1px solid var(--tlc-border); background: #fff; box-shadow: var(--sombra-s); }
.cv-aviso-ic { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--tlc-blue-claro); color: var(--tlc-blue); }
.cv-aviso-ic .ico { width: 17px; height: 17px; }
.cv-aviso.error { border-color: #F3C9C6; background: #FFFBFA; }
.cv-aviso.error .cv-aviso-ic { background: var(--tlc-peligro-claro); color: var(--tlc-peligro); }
.cv-aviso.alerta .cv-aviso-ic { background: var(--tlc-gold-claro); color: var(--tlc-gold-osc); }
.cv-aviso-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 13px; line-height: 1.45; color: var(--tlc-tinta-2); }
.cv-aviso-txt b { color: var(--tlc-navy); font-size: 13.5px; }
.cv-aviso-acc { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Bandeja (3 zonas) ---------- */
.cv-bandeja { position: relative; display: grid; grid-template-columns: 214px minmax(290px, 350px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: var(--cv-alto, 700px); background: #fff; border: 1px solid var(--tlc-border); border-radius: var(--radio-l); box-shadow: var(--sombra); overflow: hidden; }
.cv-bandeja::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cinta); z-index: 2; }

/* Zona 1: canales y carpetas */
.cv-zona1 { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: 16px 10px 10px; background: linear-gradient(180deg, #FCFAF5 0%, #F8F2E5 100%); border-right: 1px solid var(--tlc-border-2); }
.cv-zona-tit { margin: 0; padding: 0 10px 7px; font-family: var(--tlc-titulo); font-weight: 800; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--tlc-tinta-3); }
.cv-zona-tit + .cv-canales, .cv-zona-tit + .cv-carpetas { margin-bottom: 12px; }
.cv-canales, .cv-carpetas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cv-filtro { position: relative; width: 100%; display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 0 8px 0 8px; border: 0; border-radius: 11px; background: transparent; color: var(--tlc-tinta-2); font-weight: 600; font-size: 13px; text-align: left; transition: background var(--t-rapida), color var(--t-rapida); }
.cv-filtro-ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; flex: none; color: var(--tlc-tinta-3); transition: color var(--t-rapida), background var(--t-rapida); }
.cv-filtro-ic .ico { width: 16px; height: 16px; }
.cv-filtro-ic.c-wa { color: var(--cv-wa); }
.cv-filtro-ic.c-ms { color: var(--cv-ms); }
.cv-filtro-ic.c-ig { color: var(--cv-ig); }
.cv-filtro-ic.c-cf { color: var(--cv-cm); }
.cv-filtro:hover { background: rgba(255, 255, 255, .9); color: var(--tlc-navy); }
.cv-filtro:hover .cv-filtro-ic { color: var(--tlc-blue); }
.cv-filtro.activa { background: var(--tlc-navy); color: #fff; box-shadow: 0 6px 14px -8px rgba(28, 43, 94, .65); }
.cv-filtro.activa .cv-filtro-ic { color: var(--tlc-gold); }
.cv-filtro.activa:focus-visible { outline-color: var(--tlc-gold); }
.cv-filtro-txt { flex: 1; min-width: 0; line-height: 1.25; padding: 6px 0; }
.cv-filtro-txt .corto { display: none; }
.cv-cuenta { flex: none; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--tlc-cream); color: var(--tlc-navy); font-variant-numeric: tabular-nums; }
.cv-cuenta.alerta { background: var(--tlc-peligro); color: #fff; }
.cv-cuenta.dorada { background: var(--tlc-gold); color: var(--tlc-navy); }
.cv-filtro.activa .cv-cuenta { background: rgba(255, 255, 255, .16); color: #fff; }
.cv-filtro.activa .cv-cuenta.alerta { background: var(--tlc-peligro); }
.cv-filtro.activa .cv-cuenta.dorada { background: var(--tlc-gold); color: var(--tlc-navy); }
.cv-zona-pie { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.cv-pruebas { padding: 0 6px; font-size: 12px; font-weight: 600; color: var(--tlc-tinta-2); }
.cv-pruebas input.interruptor { width: 34px; height: 20px; }
.cv-pruebas input.interruptor::after { width: 14px; height: 14px; }
.cv-pruebas input.interruptor:checked::after { transform: translateX(14px); }
.cv-probar { width: 100%; display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; border: 1px dashed var(--tlc-beige); background: #fff; text-align: left; color: inherit; transition: box-shadow var(--t), border-color var(--t); }
.cv-probar:hover { border-style: solid; box-shadow: var(--sombra-m); }
.cv-probar-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--tlc-navy); color: var(--tlc-gold); }
.cv-probar-ic .ico { width: 16px; height: 16px; }
.cv-probar b { display: block; font-size: 12.5px; color: var(--tlc-navy); line-height: 1.3; }
.cv-probar small { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.35; color: var(--tlc-tinta-3); }

/* Zona 2: lista */
.cv-lista { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: #fff; border-right: 1px solid var(--tlc-border-2); transition: opacity var(--t); }
.cv-lista.cargando { opacity: .5; pointer-events: none; }
.cv-lista > .tarjeta { border: 0; box-shadow: none; border-radius: 0; }
.cv-lista-cab { display: flex; align-items: center; gap: 10px; padding: 18px 12px 13px 18px; border-bottom: 1px solid var(--tlc-border-2); flex: none; }
.cv-lista-cab > div { flex: 1; min-width: 0; }
.cv-lista-cab h2 { font-size: 17px; font-weight: 800; line-height: 1.2; }
.cv-lista-cab small { font-size: 12px; color: var(--tlc-tinta-3); }
.cv-lista-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 6px; display: flex; }
.cv-lista-cuerpo > .vacio { margin: auto; }
.cv-items { list-style: none; margin: 0; padding: 6px; flex: 1; min-height: 0; overflow-y: auto; }
.cv-items li + li { border-top: 1px solid var(--tlc-border-2); }
.cv-items li + li:has(.cv-item.activo), .cv-items li:has(.cv-item.activo) + li { border-top-color: transparent; }
.cv-item { position: relative; width: 100%; display: flex; gap: 12px; padding: 12px 10px; margin: 2px 0; border: 0; border-radius: 13px; background: transparent; text-align: left; color: inherit; transition: background var(--t-rapida), box-shadow var(--t-rapida); }
.cv-item:hover { background: #FBF7EE; }
.cv-item.activo { background: var(--tlc-navy-claro); box-shadow: inset 3px 0 0 var(--tlc-navy); }
.cv-item.activo .cv-item-extracto, .cv-item.activo .cv-item-cab time, .cv-item.activo .cv-item-prog { color: #555C69; }
.cv-item .cv-av { margin-top: 1px; }
.cv-item-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cv-item-cab { display: flex; align-items: baseline; gap: 6px; }
.cv-item-nombre { flex: 0 1 auto; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--tlc-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-item-cab time { flex: none; margin-left: auto; font-size: 11.5px; color: var(--tlc-tinta-3); font-variant-numeric: tabular-nums; }
/* «Requiere atención» es técnico: naranja (el rojo es solo «Necesita a una persona», intervencion.css › .cv-item.rojo). */
.cv-item.urgente .cv-item-cab time { color: var(--tlc-atencion-texto, #8F4510); font-weight: 600; }
.cv-item.sin-leer .cv-item-extracto { color: var(--tlc-tinta); font-weight: 600; }
.cv-item-extracto { font-size: 12.5px; line-height: 1.45; color: var(--tlc-tinta-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cv-item-quien { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: var(--tlc-tinta-2); }
.cv-item-quien .ico { width: 12px; height: 12px; }
.cv-item-quien.bot { color: var(--tlc-navy); }
.cv-item-quien.eq { color: var(--tlc-blue); }
.cv-item-pie { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.cv-item-prog { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; font-size: 11px; color: var(--tlc-tinta-3); }
.cv-item-prog span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-item-prog .ico { width: 12px; height: 12px; flex: none; }
.cv-item-vence { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: var(--tlc-gold-claro); color: #7A5605; }
.cv-item-vence .ico { width: 11px; height: 11px; }
.cv-item-prueba { height: 20px; padding: 0 7px; border-radius: 6px; display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; background: #F1EEE7; color: #4B5563; }
.cv-no-leidos { position: absolute; right: 10px; bottom: 14px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; background: var(--tlc-gold); color: var(--tlc-navy); box-shadow: 0 3px 8px -4px rgba(184, 133, 10, .8); }
.cv-cat { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 10.5px; font-weight: 600; white-space: nowrap; background: #fff; color: var(--tlc-tinta-2); box-shadow: inset 0 0 0 1px var(--tlc-border); }

/* Zona 3: conversación */
.cv-chat { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--tlc-fondo); }
.cv-chat-marco { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cv-chat-cab { position: relative; z-index: 3; display: flex; align-items: center; gap: 8px 12px; padding: 14px 20px 12px; background: #fff; border-bottom: 1px solid var(--tlc-border-2); flex: none; flex-wrap: wrap; }
.cv-atras { display: none; }
.cv-chat-id { flex: 1 1 220px; min-width: 0; }
.cv-chat-titulo { font-size: 18px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.cv-chat-titulo:focus { outline: none; }
.cv-chat-titulo:focus-visible { outline: 2.5px solid var(--tlc-blue); outline-offset: 4px; }
.cv-chat-nombre { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(28, 43, 94, .25); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.cv-chat-nombre:hover { text-decoration-color: var(--tlc-gold); }
.cv-chat-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 2px; font-size: 12.5px; color: var(--tlc-tinta-3); }
.cv-chat-sub .ico { width: 13px; height: 13px; color: var(--tlc-blue); }
.cv-sep { color: var(--tlc-tinta-4); }
.cv-chat-prog { display: inline-flex; align-items: center; gap: 4px; }
.cv-chat-pildoras { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; padding-left: 58px; }
.cv-control { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: #F4F1EA; color: var(--tlc-tinta-2); }
.cv-control.humano { background: var(--tlc-blue-claro); color: #245A96; }
.cv-control .ico { width: 13px; height: 13px; }
.cv-chat-acc { display: flex; align-items: center; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.cv-chat-acc-sec { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cv-btn-control { height: 38px; padding: 0 16px; }

.cv-chat-franja { display: flex; flex-wrap: wrap; gap: 8px; padding: 9px 20px; background: #FFFDF8; border-bottom: 1px solid var(--tlc-border-2); flex: none; }
.cv-chat-franja:empty { display: none; }
.cv-ventana, .cv-motivo { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.cv-ventana .ico, .cv-motivo .ico { width: 14px; height: 14px; flex: none; }
.cv-ventana.t-ok { background: var(--tlc-exito-claro); color: #22603F; }
.cv-ventana.t-alerta { background: var(--tlc-gold-claro); color: #6B4B05; }
.cv-ventana.t-cerrada { background: #F1EEE7; color: #4B5563; }
.cv-ventana-hasta { font-weight: 400; opacity: .85; }
.cv-motivo { background: var(--tlc-atencion-fondo, #FCEADB); color: var(--tlc-atencion-texto, #8F4510); border-radius: 12px; }
.cv-motivo.excl { background: #F1EEE7; color: #4B5563; }

/* Mensajes: fondo de chat con retícula hexagonal tenue */
.cv-msjs { flex: 1; min-height: 0; overflow-y: auto; background-color: #F7F3EA; background-image: var(--hex-tenue); background-size: 34.64px 60px; }
.cv-msjs:focus { outline: none; }
.cv-msjs:focus-visible { box-shadow: inset 0 0 0 2.5px var(--tlc-blue); }
.cv-msjs-cuerpo { display: flex; flex-direction: column; gap: 4px; padding: 16px 22px 22px; max-width: 860px; margin: 0 auto; }
.cv-dia { align-self: center; margin: 10px 0 6px; }
.cv-dia span { display: inline-block; padding: 3px 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 2px rgba(28, 43, 94, .08); font-size: 11.5px; font-weight: 600; color: var(--tlc-tinta-2); }
.cv-sin-msjs { align-self: center; margin: 30px 0; font-size: 13px; color: var(--tlc-tinta-3); }
.cv-fila { display: flex; flex-direction: column; max-width: min(78%, 560px); animation: subir var(--t) var(--curva) both; }
.cv-fila.entra { align-self: flex-start; align-items: flex-start; }
.cv-fila.sale { align-self: flex-end; align-items: flex-end; }
.cv-fila.cola { margin-bottom: 8px; }
.cv-burbuja { position: relative; padding: 8px 12px 6px; border-radius: 16px; font-size: 14px; line-height: 1.5; box-shadow: 0 1px 1.5px rgba(28, 43, 94, .08); overflow-wrap: anywhere; min-width: 92px; }
.cv-burbuja.b-persona { background: #FFFFFF; color: var(--tlc-tinta); border: 1px solid #EFE4CC; background-image: linear-gradient(180deg, #FFFDF8, #FBF4E6); }
.cv-fila.entra.cola .cv-burbuja { border-bottom-left-radius: 5px; }
.cv-fila.sale.cola .cv-burbuja { border-bottom-right-radius: 5px; }
.cv-burbuja.b-bot { background: linear-gradient(160deg, #22346E 0%, var(--tlc-navy) 60%); color: #fff; }
.cv-burbuja.b-equipo { background: var(--tlc-blue); color: #fff; }
.cv-burbuja.fallo { box-shadow: 0 0 0 2px rgba(184, 59, 54, .55); }
.cv-quien { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 3px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.cv-quien .ico { width: 12px; height: 12px; }
.cv-quien.bot { color: var(--tlc-gold); }
.cv-quien.eq { color: #D6E6F8; }
.cv-quien-det { font-weight: 600; text-transform: none; letter-spacing: 0; opacity: .85; }
.cv-texto { margin: 0; white-space: pre-wrap; }
.cv-texto-tipo { display: inline-flex; align-items: center; gap: 6px; font-style: italic; opacity: .85; }
.cv-meta { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-top: 2px; font-size: 10.5px; opacity: .78; font-variant-numeric: tabular-nums; }
.cv-burbuja.b-persona .cv-meta { color: var(--tlc-tinta-3); opacity: 1; }
.cv-envio { display: inline-flex; }
.cv-envio .ico { width: 14px; height: 14px; }
.cv-envio.leido { color: var(--tlc-gold); }
.cv-envio.alerta { color: #FFD77A; }
.cv-envio.mal { color: #FFB3B0; }
.cv-meta-prueba { padding: 0 5px; border-radius: 4px; background: rgba(255, 255, 255, .2); font-weight: 700; }
.cv-burbuja.b-persona .cv-meta-prueba { background: #F1EEE7; color: #4B5563; }
.cv-plantilla-tag { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 4px; padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: 11px; font-weight: 700; }
.cv-error-envio { display: flex; align-items: center; gap: 5px; margin: 4px 4px 0; font-size: 11.5px; font-weight: 600; color: var(--tlc-peligro); }
.cv-ia-linea { display: flex; align-items: center; gap: 4px; margin: 4px 6px 0; font-size: 11px; color: var(--tlc-tinta-3); }
.cv-ia-linea .ico { width: 12px; height: 12px; color: var(--tlc-gold-osc); }
.cv-sistema { align-self: center; display: inline-flex; align-items: center; gap: 6px; max-width: 86%; margin: 6px 0; padding: 6px 12px; border-radius: 12px; background: rgba(255, 255, 255, .9); border: 1px dashed var(--tlc-border); font-size: 12px; color: var(--tlc-tinta-2); }
.cv-sistema time { color: var(--tlc-tinta-3); font-size: 11px; }
.cv-burbuja-esq { height: 46px; border-radius: 16px; background: linear-gradient(90deg, #EFE8D9 0%, #F8F2E5 50%, #EFE8D9 100%); background-size: 200% 100%; animation: brillo 1.2s linear infinite; margin-bottom: 10px; }
.cv-burbuja-esq.der { align-self: flex-end; background: linear-gradient(90deg, #D9DFEE 0%, #E8ECF6 50%, #D9DFEE 100%); background-size: 200% 100%; }
@keyframes brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Adjuntos */
.cv-adjs { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 6px; }
.cv-adj { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: 11px; border: 1px solid rgba(28, 43, 94, .12); background: rgba(255, 255, 255, .92); color: var(--tlc-navy); text-align: left; font-size: 12px; }
.cv-adj > .ico { width: 18px; height: 18px; color: var(--tlc-blue); flex: none; }
.cv-adj b { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.cv-adj small { display: block; color: var(--tlc-tinta-3); }
.cv-adj-ver { margin-left: auto; font-weight: 700; color: var(--tlc-blue); }
.cv-adj:hover { border-color: var(--tlc-beige); }
.cv-adj.sin { cursor: default; opacity: .8; }
.cv-adj-img { position: relative; display: block; width: 230px; max-width: 100%; height: 170px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #EFE8D9; cursor: zoom-in; }
.cv-adj-img img { width: 100%; height: 100%; object-fit: cover; }
.cv-adj-img-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--tlc-tinta-3); font-size: 11.5px; padding: 10px; text-align: center; }
.cv-adj-img-ph .ico { width: 26px; height: 26px; }
.cv-adj-img.con-img .cv-adj-img-ph { display: none; }
.cv-adj-cargando { display: flex; align-items: center; gap: 8px; padding: 30px; justify-content: center; color: var(--tlc-tinta-3); }
.cv-adj-vista { display: grid; place-items: center; background: #F4EFE4; border-radius: 12px; overflow: hidden; max-height: 64vh; }
.cv-adj-vista img { max-height: 64vh; width: auto; }
.cv-adj-vista.pdf iframe { width: 100%; height: 64vh; border: 0; background: #fff; }
.cv-adj-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.cv-adj-falla { display: flex; gap: 8px; align-items: center; padding: 30px; color: var(--tlc-tinta-3); }

/* Contexto: lo que sabe el bot */
.cv-ctx { margin: 0 0 8px; background: #fff; border: 1px solid var(--tlc-border); border-radius: 14px; box-shadow: var(--sombra-s); overflow: hidden; }
.cv-ctx-cab { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; background: transparent; text-align: left; color: inherit; }
.cv-ctx-etq { display: inline-flex; align-items: center; gap: 5px; flex: none; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--tlc-navy); color: #fff; font-size: 11.5px; font-weight: 700; }
.cv-ctx-etq .ico { color: var(--tlc-gold); width: 13px; height: 13px; }
.cv-ctx-res { flex: 1; min-width: 0; font-size: 12.5px; color: var(--tlc-tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-conf { flex: none; height: 22px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; background: var(--tlc-exito-claro); color: var(--tlc-exito); }
.cv-conf.media { background: var(--tlc-gold-claro); color: #7A5605; }
.cv-conf.baja { background: var(--tlc-peligro-claro); color: var(--tlc-peligro); }
.cv-ctx-chev { width: 16px; height: 16px; color: var(--tlc-tinta-3); flex: none; transition: transform var(--t); }
.cv-ctx.abierta .cv-ctx-chev { transform: rotate(180deg); }
.cv-ctx-cuerpo { display: none; padding: 4px 14px 14px; border-top: 1px solid var(--tlc-border-2); }
.cv-ctx.abierta .cv-ctx-cuerpo { display: block; }
.cv-ctx-cita { margin: 10px 0 12px; padding: 12px 14px 12px 46px; font-size: 13px; }
.cv-ctx-cita::before { font-size: 48px; left: 12px; }
.cv-ctx-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 6px 0 0; }
.cv-ctx-datos div { min-width: 0; }
.cv-ctx-datos dt { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tlc-tinta-3); }
.cv-ctx-datos dd { margin: 1px 0 0; font-size: 13px; color: var(--tlc-navy); overflow-wrap: anywhere; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cv-ctx-pagos { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cv-ctx-pagos li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--tlc-gold-claro); border: 1px solid #F3DD9E; }
.cv-ctx-pagos li > span:nth-child(2) { flex: 1; min-width: 140px; }
.cv-ctx-pagos b { display: block; font-size: 13px; color: var(--tlc-navy); }
.cv-ctx-pagos small { display: block; font-size: 12px; color: #6B4B05; }
.cv-ctx-pago-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #fff; color: var(--tlc-gold-osc); flex: none; }

/* Compositor */
.cv-comp { flex: none; position: relative; z-index: 3; background: #fff; border-top: 1px solid var(--tlc-border-2); padding: 12px 18px 12px; box-shadow: 0 -10px 22px -20px rgba(28, 43, 94, .6); display: flex; flex-direction: column; gap: 10px; }
.cv-comp:empty { display: none; }
.cv-borrador { border: 1px solid #F0D58A; border-radius: 14px; background: linear-gradient(180deg, #FFFCF2, #FFF8E3); padding: 12px 12px 10px; position: relative; overflow: hidden; }
.cv-borrador::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cinta); }
.cv-borrador-cab { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.cv-borrador-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--tlc-navy); color: var(--tlc-gold); }
.cv-borrador-ic .ico { width: 16px; height: 16px; }
.cv-borrador-cab b { display: block; font-size: 13.5px; color: var(--tlc-navy); }
.cv-borrador-cab small { display: block; font-size: 12px; color: var(--tlc-tinta-3); }
.cv-bor-txt { min-height: 72px; resize: none; background: #fff; }
.cv-borrador-pie { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.cv-contador { margin-right: auto; font-size: 11.5px; color: var(--tlc-tinta-3); font-variant-numeric: tabular-nums; }
.cv-escribir { display: flex; align-items: flex-end; gap: 10px; }
.cv-txt { flex: 1; min-width: 0; min-height: 44px; max-height: 180px; resize: none; padding: 11px 16px; border-radius: 22px; border: 1px solid var(--tlc-border); background: #FCFAF5; font: inherit; font-size: 14px; line-height: 1.45; color: var(--tlc-tinta); transition: border-color var(--t-rapida), box-shadow var(--t-rapida), background var(--t-rapida); }
.cv-txt::placeholder { color: var(--tlc-tinta-3); }
.cv-txt:focus { outline: none; border-color: var(--tlc-blue); box-shadow: var(--anillo); background: #fff; }
.cv-btn-enviar { height: 44px; border-radius: 22px; padding: 0 18px; }
.cv-escribir-nota { display: flex; align-items: center; gap: 6px; margin: -2px 6px 0; font-size: 11.5px; color: var(--tlc-tinta-3); }
.cv-escribir-nota > span:first-of-type { flex: 1; min-width: 0; }
.cv-kbd-ayuda { flex: none; color: var(--tlc-tinta-3); opacity: .9; }
.cv-escribir-nota .ico { width: 13px; height: 13px; flex: none; }
.cv-escribir-nota kbd { font-family: var(--tlc-sans); font-size: 10.5px; padding: 0 5px; border-radius: 4px; border: 1px solid var(--tlc-border); background: #fff; }
.cv-cerrada { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #F7F4EE; border: 1px solid var(--tlc-border-2); flex-wrap: wrap; }
.cv-cerrada > div { flex: 1 1 260px; min-width: 0; }
.cv-cerrada b { display: block; font-size: 13.5px; color: var(--tlc-navy); }
.cv-cerrada small { display: block; font-size: 12.5px; line-height: 1.45; color: var(--tlc-tinta-3); }
.cv-cerrada-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: #fff; color: var(--tlc-navy); border: 1px solid var(--tlc-border); flex: none; }

/* Estado vacío y error de la zona 3 */
.cv-chat-vacio { margin: auto; max-width: 470px; padding: 34px 26px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; overflow-y: auto; }
.cv-chat-vacio .titular { font-size: 24px; }
.cv-chat-vacio p { font-size: 13.5px; line-height: 1.6; color: var(--tlc-tinta-3); }
.cv-sello { width: 66px; height: 66px; border-radius: 20px; display: grid; place-items: center; background: var(--tlc-navy); color: var(--tlc-gold); box-shadow: 0 14px 28px -16px rgba(28, 43, 94, .9); position: relative; }
.cv-sello::after { content: ''; position: absolute; inset: -6px; border-radius: 24px; border: 1px dashed var(--tlc-beige); }
.cv-sello .ico { width: 30px; height: 30px; }
.cv-como { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; width: 100%; }
.cv-como li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 13px; border-radius: 13px; background: #fff; border: 1px solid var(--tlc-border-2); }
.cv-como li > span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--tlc-gold); color: var(--tlc-navy); font-family: var(--tlc-titulo); font-weight: 800; font-size: 13px; }
.cv-como b { display: block; font-size: 13px; color: var(--tlc-navy); }
.cv-como small { display: block; font-size: 12px; line-height: 1.45; color: var(--tlc-tinta-3); }
.cv-chat-error { flex: 1; display: grid; place-items: center; padding: 20px; }

/* Comentarios */
.cv-pub { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 12px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--tlc-border); }
.cv-pub > .ico { width: 22px; height: 22px; color: var(--tlc-blue); flex: none; margin-top: 2px; }
.cv-pub .etq { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tlc-tinta-3); }
.cv-pub p { margin: 2px 0 0; font-size: 13px; color: var(--tlc-tinta-2); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cv-resp { margin-top: 12px; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--tlc-border); }
.cv-resp header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.cv-resp header b { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tlc-navy); }
.cv-resp header b .ico { color: var(--tlc-blue); }
.cv-resp .textarea { min-height: 64px; }
.cv-resp-texto { margin: 0; font-size: 13.5px; white-space: pre-wrap; color: var(--tlc-tinta); }
.cv-resp-ok, .cv-resp-reloj { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--tlc-exito-claro); color: var(--tlc-exito); }
.cv-resp-reloj { background: var(--tlc-blue-claro); color: #245A96; }
.cv-resp-reloj.alerta { background: var(--tlc-gold-claro); color: #7A5605; }
.cv-com-acc { flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 18px; background: #fff; border-top: 1px solid var(--tlc-border-2); }
.cv-com-sep { flex: 1; }

/* Modales del módulo */
.cv-indicaciones, .cv-sim-ejemplos { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-indicaciones .chip, .cv-sim-ejemplos .chip { cursor: pointer; }
.cv-motivos { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cv-motivos li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: #6B4B05; background: var(--tlc-gold-claro); padding: 8px 10px; border-radius: 10px; }
.cv-pl-vista { padding: 12px 14px; border-radius: 14px; background: #F7F3EA; border: 1px solid var(--tlc-border-2); }
.cv-pl-vista .etq { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tlc-tinta-3); margin-bottom: 6px; }
.cv-pl-texto { margin: 0; padding: 10px 12px; border-radius: 14px 14px 14px 5px; background: var(--tlc-blue); color: #fff; white-space: pre-wrap; font-size: 13.5px; line-height: 1.5; max-width: 92%; }
.cv-pl-costo { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--tlc-tinta-2); }
.cv-pl-costo .ico { flex: none; margin-top: 2px; color: var(--tlc-blue); }
.cv-sim-adj { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cv-sim-adj label.btn { cursor: pointer; }
.cv-sim-adj-nombre { display: inline-flex; align-items: center; gap: 5px; }
.cv-sim-llave { margin-left: auto; flex: none; }
.cv-sim-res { display: flex; flex-direction: column; gap: 14px; }
.cv-sim-dec { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--tlc-gold-claro); color: #6B4B05; }
.cv-sim-dec.ok { background: var(--tlc-exito-claro); color: #22603F; }
.cv-sim-dec > .ico { width: 22px; height: 22px; flex: none; }
.cv-sim-dec b { display: block; font-size: 14px; }
.cv-sim-dec small { display: block; font-size: 12.5px; opacity: .9; }
.cv-sim-burbuja { align-self: flex-end; max-width: 88%; padding: 10px 13px 9px; border-radius: 16px 16px 5px 16px; background: linear-gradient(160deg, #22346E 0%, var(--tlc-navy) 60%); color: #fff; font-size: 14px; line-height: 1.5; }

/* ---------- Tableta: canales y carpetas pasan arriba como tiras ---------- */
@media (max-width: 1180px) {
  .cv-bandeja { grid-template-columns: minmax(270px, 330px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .cv-zona1 { grid-column: 1 / -1; flex-direction: column; gap: 8px; overflow: visible; padding: 14px 12px 10px; border-right: 0; border-bottom: 1px solid var(--tlc-border-2); background: #FCFAF5; }
  .cv-zona-tit { display: none; }
  .cv-canales, .cv-carpetas { flex-direction: row; gap: 6px; margin: 0 !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x proximity; padding-bottom: 2px; }
  .cv-canales::-webkit-scrollbar, .cv-carpetas::-webkit-scrollbar { display: none; }
  .cv-canales li, .cv-carpetas li { scroll-snap-align: start; flex: none; }
  .cv-canales.mas-der, .cv-carpetas.mas-der { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
  .cv-canales.mas-izq, .cv-carpetas.mas-izq { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
  .cv-canales.mas-izq.mas-der, .cv-carpetas.mas-izq.mas-der { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 56px), transparent); }
  .cv-filtro { width: auto; min-height: 34px; padding: 0 11px 0 7px; border-radius: 999px; border: 1px solid var(--tlc-border); background: #fff; white-space: nowrap; }
  .cv-filtro.activa { border-color: var(--tlc-navy); }
  .cv-filtro-ic { width: 20px; height: 20px; }
  .cv-filtro-txt { padding: 0; }
  .cv-filtro-txt .largo { display: none; }
  .cv-filtro-txt .corto { display: inline; }
  .cv-carpetas .cv-filtro { min-height: 30px; font-size: 12.5px; background: transparent; border-color: transparent; }
  .cv-carpetas .cv-filtro:not(.activa):hover { background: #fff; border-color: var(--tlc-border); }
  .cv-carpetas .cv-filtro.activa { background: var(--tlc-navy); border-color: var(--tlc-navy); }
  .cv-zona-pie { flex-direction: row; justify-content: flex-end; padding-top: 0; margin-top: -2px; }
  .cv-probar { display: none; }
  .cv-chat-acc { justify-content: flex-start; width: 100%; padding-left: 58px; }
  .cv-chat-acc-sec { justify-content: flex-start; }
  .cv-estado-ints { border-left: 0; padding-left: 0; }
}

/* ---------- Celular: lista → conversación ---------- */
@media (max-width: 860px) {
  .cv-estado { padding: 12px 14px; gap: 12px; }
  .cv-estado-ints { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; width: 100%; }
  .cv-aviso { flex-wrap: wrap; }
  .cv-aviso-acc { width: 100%; justify-content: flex-start; padding-left: 46px; }
  .cv-bandeja { display: block; height: auto; overflow: visible; overflow: clip; border-radius: var(--radio); }
  .cv-bandeja::before { border-radius: var(--radio) var(--radio) 0 0; }
  .cv-bandeja[data-movil="lista"] .cv-chat { display: none; }
  .cv-bandeja[data-movil="hilo"] .cv-lista, .cv-bandeja[data-movil="hilo"] .cv-zona1 { display: none; }
  .cv:has(.cv-bandeja[data-movil="hilo"]) .cv-estado, .cv:has(.cv-bandeja[data-movil="hilo"]) .cv-avisos { display: none; }
  .cv-zona1 { border-radius: var(--radio) var(--radio) 0 0; }
  .cv-lista { border-right: 0; border-radius: 0 0 var(--radio) var(--radio); }
  .cv-lista-cab { padding: 14px 10px 11px 14px; }
  .cv-items, .cv-lista-cuerpo { overflow: visible; }
  .cv-chat { border-radius: var(--radio); }
  .cv-chat-marco { overflow: visible; }
  .cv-chat-cab { position: sticky; top: var(--barra-real, 76px); padding: 12px 12px; border-radius: var(--radio) var(--radio) 0 0; gap: 10px; }
  .cv-atras { display: inline-flex; }
  .cv-av.g .avatar { width: 40px; height: 40px; font-size: 13px; }
  .cv-chat-titulo { font-size: 16px; }
  .cv-chat-id { flex-basis: 0; flex-grow: 1; }
  .cv-chat-acc { padding-left: 0; }
  .cv-btn-control { flex: 1 1 100%; }
  .cv-chat-acc-sec { flex: 1 1 100%; justify-content: flex-start; }
  .cv-chat-pildoras { padding-left: 0; }
  .cv-kbd-ayuda { display: none; }
  .cv-chat-franja { padding: 8px 12px; }
  .cv-msjs { overflow: visible; min-height: 50vh; }
  .cv-msjs-cuerpo { padding: 12px 10px 18px; }
  .cv-fila { max-width: 88%; }
  .cv-ctx-datos { grid-template-columns: minmax(0, 1fr); }
  .cv-comp { position: sticky; bottom: 0; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); border-radius: 0 0 var(--radio) var(--radio); }
  .cv-escribir-nota kbd, .cv-escribir-nota .kbd-ayuda { display: none; }
  .cv-btn-enviar span { display: none; }
  .cv-btn-enviar { width: 44px; padding: 0; }
  .cv-com-acc { position: sticky; bottom: 0; padding: 10px; }
  .cv-com-acc .btn:not(.btn-s) { flex: 1 1 auto; }
  .cv-chat-vacio { padding: 26px 16px; }
}
@media (max-width: 420px) {
  .cv-int-ic { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cv-fila, .cv-burbuja-esq { animation: none; }
}

/* =====================================================================
   Configuración › Meta (.cm-) — rehecha el 20-oct-2026: «Tu avance con Facebook e Instagram» (14 pasos con su
   estado), las llaves de «TLC Hub Redes» al lado y, plegados, «WhatsApp (más adelante)» y «Opciones avanzadas».
   ===================================================================== */
.cm { display: flex; flex-direction: column; gap: 18px; }
.cm-principal { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cm-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cm-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.cm-campos .completo { grid-column: 1 / -1; }
.cm-campos.cm-campos-1 { grid-template-columns: minmax(0, 1fr); }
.cm-estado-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.cm-estado-grid div { padding: 10px 12px; border-radius: 12px; background: var(--tlc-cream-2); border: 1px solid var(--tlc-border-2); min-width: 0; }
.cm-estado-grid dt { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tlc-tinta-3); }
.cm-estado-grid dd { margin: 3px 0 0; font-size: 13px; font-weight: 600; color: var(--tlc-navy); overflow-wrap: anywhere; }
.cm-estado-grid dd.ok { color: var(--tlc-exito); }
.cm-estado-grid dd.mal { color: var(--tlc-peligro); }
.cm-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cm-sep { height: 1px; background: var(--tlc-border-2); margin: 4px 0; }
.cm-sub { font-family: var(--tlc-titulo); font-weight: 800; font-size: 14px; color: var(--tlc-navy); margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cm-sub .ico { color: var(--tlc-blue); width: 17px; height: 17px; }
.cm-cobro { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--tlc-gold-claro); border: 1px solid #F3DD9E; color: #6B4B05; font-size: 13px; line-height: 1.5; }
.cm-cobro .ico { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.cm-cobro b { color: #5A3F04; }
.cm-cobro a .ico { width: 13px; height: 13px; margin: 0 0 0 3px; vertical-align: -2px; }
.cm-plantillas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cm-plantillas li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--tlc-border-2); background: #fff; font-size: 13px; flex-wrap: wrap; }
.cm-plantillas li b { color: var(--tlc-navy); }
.cm-plantillas li small { color: var(--tlc-tinta-3); }
.cm-plantillas li .pildora { margin-left: auto; }
.cm-casillas { display: flex; flex-direction: column; gap: 10px; }
.cm-casillas .casilla { align-items: flex-start; }
.cm-casillas .casilla small { display: block; font-size: 12px; color: var(--tlc-tinta-3); font-weight: 400; }
.cm-casillas .casilla b { font-weight: 600; color: var(--tlc-navy); }
.cm-msg { display: flex; flex-direction: column; gap: 8px; }
.cm-msg:empty { display: none; }
.cm-pin { letter-spacing: .4em; font-family: var(--tlc-mono); font-size: 20px; text-align: center; }
.cm-modo-prueba { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cm-modo-prueba .casilla { flex: 1 1 260px; }
.cm-enlace { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font-size: 13px; font-weight: 600; color: var(--tlc-blue); text-decoration: none; }
.cm-enlace:hover { text-decoration: underline; text-underline-offset: 2px; }
.cm-enlace .ico { width: 14px; height: 14px; }
.cm-chip { display: inline-block; margin: 2px 4px 2px 0; padding: 1px 7px; border-radius: 6px; background: var(--tlc-cream-2); border: 1px solid var(--tlc-border-2); font-family: var(--tlc-mono); font-size: 11.5px; line-height: 1.6; color: var(--tlc-navy); }
.cm-nota-boton { margin: -4px 0 0; font-size: 12px; color: var(--tlc-tinta-3); }
/* Llaves: campo de texto que se ve como puntos (no type="password": el navegador no la toma por una contraseña). */
.cm-oculta { -webkit-text-security: disc; text-security: disc; }

/* «Tu avance con Facebook e Instagram» */
.cm-avance { position: relative; overflow: hidden; padding: 20px 20px 16px; }
.cm-avance::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cinta); }
.cm-av-cab-tarjeta { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cm-av-cab-tarjeta h3 { font-family: var(--tlc-titulo); font-size: 19px; font-weight: 800; line-height: 1.25; color: var(--tlc-navy); }
.cm-av-cab-tarjeta p { margin-top: 6px; max-width: 560px; font-size: 13px; line-height: 1.55; color: var(--tlc-tinta-2); }
.cm-av-cuenta { flex: none; min-width: 84px; padding: 8px 12px; border-radius: 14px; background: var(--tlc-navy); color: #fff; text-align: center; }
.cm-av-cuenta b { display: block; font-family: var(--tlc-titulo); font-size: 26px; line-height: 1; color: var(--tlc-gold); }
.cm-av-cuenta span { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.cm-av-barra { display: flex; gap: 4px; margin-top: 14px; }
.cm-av-barra i { flex: 1; height: 6px; border-radius: 999px; background: #EFE8D9; }
.cm-av-barra i.hecho { background: var(--tlc-navy); }
.cm-av-barra i.esperando { background: var(--tlc-sky); }
.cm-av-barra i.revisar { background: var(--tlc-gold); }
.cm-av-siguiente { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: var(--tlc-gold-claro); border: 1px solid #F3DD9E; color: #5A3F04; font-size: 13px; line-height: 1.45; }
.cm-av-siguiente > .ico { flex: none; width: 17px; height: 17px; color: var(--tlc-gold-osc); }
.cm-av-siguiente > span { flex: 1; min-width: 0; }
.cm-av-siguiente b { color: var(--tlc-navy); }
.cm-av-siguiente .enlace { flex: none; min-height: 28px; font-size: 13px; }
.cm-av-siguiente.listo { background: var(--tlc-exito-claro); border-color: #BFE0CC; color: #22603F; }
.cm-av-siguiente.listo > .ico { color: var(--tlc-exito); }
.cm-av-siguiente.esperando { background: var(--tlc-blue-claro); border-color: #C9DCF2; color: #1F4E85; }
.cm-av-siguiente.esperando > .ico { color: var(--tlc-blue); }
.cm-av-siguiente.revisar { background: #FDF3D8; border-color: #F0C96B; color: #6B4B05; }
.cm-av-lista { list-style: none; margin: 12px 0 0; padding: 0; }
.cm-av-paso { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; padding: 12px 10px; border-top: 1px dashed var(--tlc-border); scroll-margin-top: 90px; }
.cm-av-paso:first-child { border-top-color: transparent; }
.cm-av-paso.sigue { border-top-color: transparent; border-radius: 14px; background: #FFFAEE; box-shadow: inset 0 0 0 1.5px #F3DD9E; }
.cm-av-paso.sigue + .cm-av-paso { border-top-color: transparent; }
.cm-av-num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--tlc-border); color: var(--tlc-navy); font-family: var(--tlc-titulo); font-size: 13px; font-weight: 800; }
.cm-av-num .ico { width: 15px; height: 15px; stroke-width: 2.6; }
.cm-av-paso.hecho .cm-av-num { background: var(--tlc-navy); border-color: var(--tlc-navy); color: var(--tlc-gold); }
.cm-av-paso.esperando .cm-av-num { background: var(--tlc-sky-claro); border-color: var(--tlc-sky); color: var(--tlc-blue); }
.cm-av-paso.revisar .cm-av-num { background: var(--tlc-gold-claro); border-color: var(--tlc-gold); color: var(--tlc-gold-osc); }
.cm-av-paso.sigue .cm-av-num { background: var(--tlc-gold); border-color: var(--tlc-gold); color: var(--tlc-navy); }
.cm-av-cuerpo { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cm-av-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px 10px; min-height: 30px; }
.cm-av-tit { padding-top: 5px; font-family: var(--tlc-sans); font-size: 13.5px; font-weight: 700; line-height: 1.4; color: var(--tlc-navy); }
.cm-av-paso.hecho .cm-av-tit { font-weight: 600; color: var(--tlc-tinta-2); }
.cm-av-estado { flex: none; display: inline-flex; align-items: center; gap: 6px; padding-top: 4px; }
.cm-av-sigue { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--tlc-navy); color: var(--tlc-gold); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.cm-av-que { font-size: 13px; line-height: 1.55; color: var(--tlc-tinta-2); overflow-wrap: anywhere; }
.cm-av-que b { color: var(--tlc-navy); }
.cm-av-nota { font-size: 12.5px; line-height: 1.5; color: var(--tlc-exito); overflow-wrap: anywhere; }
.cm-av-fecha { font-size: 12px; color: var(--tlc-tinta-3); }
.cm-av-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 2px; }
.cm-av-pie .cm-casillas { flex-basis: 100%; margin-top: 4px; }
.cm-av-marca { min-height: 32px; font-size: 13px; font-weight: 600; color: var(--tlc-navy); }
.cm-av-solo { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--tlc-tinta-3); }
.cm-av-solo .ico { color: var(--tlc-tinta-4); }
.cm-av-copiar { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.cm-av-campos { font-size: 12.5px; line-height: 1.6; color: var(--tlc-tinta-2); }
.cm-av-campos b { margin-right: 4px; color: var(--tlc-navy); }
.cm-av-chips { margin-top: 6px; }
.cm-av-mas .cm-av-copiar { margin-top: 8px; }
.cm-av-int { align-items: flex-start; }
.cm-av-int b { font-weight: 600; color: var(--tlc-navy); }
.cm-av-int small { display: block; font-size: 12px; font-weight: 400; color: var(--tlc-tinta-3); }
.cm-av-paso .mensaje-caja { font-size: 12.5px; }
.cm-av-msg:empty { display: none; }
.cm-av-mas > summary, .cm-opcional > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; font-size: 13px; font-weight: 600; color: var(--tlc-blue); }
.cm-av-mas > summary::-webkit-details-marker, .cm-opcional > summary::-webkit-details-marker { display: none; }
.cm-av-mas > summary .ico, .cm-opcional > summary .ico { transition: transform var(--t) var(--curva); }
.cm-av-mas[open] > summary .ico, .cm-opcional[open] > summary .ico { transform: rotate(90deg); }
.cm-av-mas > summary:hover, .cm-opcional > summary:hover { color: var(--tlc-navy); }

/* Llaves de «TLC Hub Redes» */
.cm-opcional { padding-top: 8px; border-top: 1px dashed var(--tlc-border); }
.cm-opcional > summary .gris { font-weight: 400; }
.cm-opcional[open] > .cm-campos { margin-top: 10px; }

/* Tarjetas plegables: «WhatsApp (más adelante)» y «Opciones avanzadas» */
.cm-plegable > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radio); }
.cm-plegable > summary::-webkit-details-marker { display: none; }
.cm-plegable > summary:hover { background: #FCFAF5; }
.cm-plegable[open] > summary { border-bottom: 1px solid var(--tlc-border-2); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.cm-plegable-ic { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--tlc-cream-2); color: var(--tlc-navy); }
.cm-plegable-ic .ico { width: 18px; height: 18px; }
.cm-plegable-txt { flex: 1; min-width: 0; }
.cm-plegable-txt b { display: block; font-family: var(--tlc-titulo); font-size: 14.5px; font-weight: 800; color: var(--tlc-navy); }
.cm-plegable-txt small { display: block; font-size: 12px; line-height: 1.4; color: var(--tlc-tinta-3); }
.cm-plegable > summary .estado-punto { flex: none; font-size: 12px; }
.cm-plegable > summary .ico.cm-chev { flex: none; width: 18px; height: 18px; color: var(--tlc-tinta-3); transition: transform var(--t) var(--curva); }
.cm-plegable[open] > summary .ico.cm-chev { transform: rotate(180deg); }
.cm-plegable-cuerpo { padding: 16px; }
.cm-avanzadas-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; align-items: start; }
.cm-resaltada { box-shadow: 0 0 0 3px var(--tlc-gold, #F0B323), 0 8px 24px rgba(240, 179, 35, .25); transition: box-shadow .4s ease; }

@media (max-width: 1180px) {
  .cm-principal { grid-template-columns: minmax(0, 1fr); }
  .cm-avanzadas-rejilla { grid-template-columns: minmax(0, 1fr); }
  .cm-avanzadas-rejilla > .pila + .pila { padding-top: 16px; border-top: 1px solid var(--tlc-border-2); }
}
@media (max-width: 760px) {
  .cm-campos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cm-avance { padding: 16px 14px 12px; }
  .cm-av-cab-tarjeta { gap: 12px; }
  .cm-av-cab-tarjeta h3 { font-size: 17px; }
  .cm-av-cuenta { min-width: 70px; padding: 6px 10px; }
  .cm-av-cuenta b { font-size: 22px; }
  .cm-av-paso { grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; padding: 12px 6px; }
  .cm-av-num { width: 26px; height: 26px; font-size: 12px; }
  .cm-av-cab { flex-direction: column; gap: 4px; }
  .cm-av-tit { padding-top: 3px; }
  .cm-av-estado { padding-top: 0; }
  .cm-plegable > summary { gap: 10px; padding: 12px; }
  .cm-plegable > summary .estado-punto { display: none; }
  .cm-plegable-cuerpo { padding: 14px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-av-mas > summary .ico, .cm-opcional > summary .ico, .cm-plegable > summary .ico.cm-chev, .cm-resaltada { transition: none; }
}

/* =====================================================================
   Panel: mensajes por canal (.pn-ms-)
   ===================================================================== */
.pn-ms-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pn-ms-canales { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pn-ms-canal { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 14px; border-radius: var(--radio); background: #fff; border: 1px solid var(--tlc-border); box-shadow: var(--sombra); color: inherit; text-decoration: none; transition: box-shadow var(--t), transform var(--t), border-color var(--t); overflow: hidden; }
.pn-ms-canal::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cv-wa); }
.pn-ms-canal.c-ms::before { background: var(--cv-ms); }
.pn-ms-canal.c-ig::before { background: var(--tlc-gold); }
.pn-ms-canal.c-cf::before { background: var(--cv-cm); }
a.pn-ms-canal:hover { text-decoration: none; box-shadow: var(--sombra-m); transform: translateY(-1px); border-color: #DDCDA9; }
.pn-ms-canal-cab { display: flex; align-items: center; gap: 10px; }
.pn-ms-canal-cab .cv-canal-ic { width: 30px; height: 30px; }
.pn-ms-canal-cab .cv-canal-ic .ico { width: 16px; height: 16px; }
.pn-ms-canal-cab b { font-size: 13.5px; color: var(--tlc-navy); }
.pn-ms-canal-cab .estado { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--tlc-tinta-3); }
.pn-ms-canal-cab .estado.on { color: var(--tlc-exito); }
.pn-ms-cifra { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pn-ms-cifra b { font-family: var(--tlc-titulo); font-weight: 800; font-size: 30px; line-height: 1; color: var(--tlc-navy); font-variant-numeric: tabular-nums; }
.pn-ms-cifra span { font-size: 12px; color: var(--tlc-tinta-3); }
.pn-ms-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; margin: 0; padding-top: 10px; border-top: 1px solid var(--tlc-border-2); }
.pn-ms-datos dt { font-size: 10.5px; color: var(--tlc-tinta-3); font-weight: 600; }
.pn-ms-datos dd { margin: 0; font-size: 13px; font-weight: 700; color: var(--tlc-navy); font-variant-numeric: tabular-nums; }
.pn-ms-op { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pn-ms-op a, .pn-ms-op span { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid var(--tlc-border); font-size: 12.5px; font-weight: 600; color: var(--tlc-tinta-2); text-decoration: none; }
.pn-ms-op a:hover { border-color: var(--tlc-beige); color: var(--tlc-navy); }
.pn-ms-op .ico { width: 14px; height: 14px; color: var(--tlc-blue); }
.pn-ms-op .alerta { border-color: #F3C9C6; background: #FFFBFA; color: var(--tlc-peligro); }
.pn-ms-op .alerta .ico { color: var(--tlc-peligro); }
.pn-ms-op b { font-variant-numeric: tabular-nums; color: var(--tlc-navy); }
.pn-ms-op .alerta b { color: var(--tlc-peligro); }
.pn-ms-nota { display: flex; gap: 6px; align-items: center; margin-top: 8px; font-size: 12px; color: var(--tlc-tinta-3); }
.pn-viva-mensajes { color: inherit; text-decoration: none; }
.pn-viva-mensajes:hover { text-decoration: none; }
.pn-viva-mensajes:hover .cifra { color: var(--tlc-gold); }
@media (max-width: 1280px) { .pn-ms-canales { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pn-ms-canales { grid-template-columns: minmax(0, 1fr); } .pn-ms-cifra b { font-size: 26px; } }

/* =====================================================================
   Ficha del prospecto: conversaciones (.fi-cv-)
   ===================================================================== */
.fi-cv-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fi-cv { width: 100%; display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--tlc-border); background: #fff; text-align: left; color: inherit; transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
.fi-cv:hover { border-color: #DDCDA9; box-shadow: var(--sombra-m); transform: translateY(-1px); }
.fi-cv .cv-canal-ic { width: 36px; height: 36px; }
.fi-cv .cv-canal-ic .ico { width: 18px; height: 18px; }
.fi-cv-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fi-cv-cab { display: flex; align-items: baseline; gap: 8px; }
.fi-cv-cab b { font-size: 13.5px; color: var(--tlc-navy); }
.fi-cv-cab time { margin-left: auto; font-size: 11.5px; color: var(--tlc-tinta-3); flex: none; }
.fi-cv-ext { font-size: 12.5px; color: var(--tlc-tinta-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fi-cv-pie { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.evento-ic.c-wa { color: var(--cv-wa); border-color: rgba(42, 117, 80, .4); }
.evento-ic.c-ms { color: var(--cv-ms); border-color: rgba(46, 109, 180, .4); }
.evento-ic.c-ig { color: var(--cv-ig); border-color: rgba(138, 98, 6, .4); }
.evento-ic.c-cf, .evento-ic.c-ci { color: var(--cv-cm); border-color: rgba(28, 43, 94, .35); }

/* Configuración con 5 pestañas (Llamadas, Correo, Meta, IA, Cuenta) */
.cf-tabs.cf-tabs-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .cf-tabs.cf-tabs-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cf-tabs.cf-tabs-5 > .cf-tab { grid-column: span 2; }
  .cf-tabs.cf-tabs-5 > .cf-tab:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 640px) {
  .cf-tabs.cf-tabs-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-tabs.cf-tabs-5 > .cf-tab, .cf-tabs.cf-tabs-5 > .cf-tab:nth-child(n+4) { grid-column: auto; }
  .cf-tabs.cf-tabs-5 > .cf-tab:last-child { grid-column: 1 / -1; }
}
.pn-viva-ms { display: contents; }
.pn-viva-ms[hidden] { display: none; }

.cf-tabs-5 .cf-tab-txt b { white-space: normal; line-height: 1.2; }
@media (max-width: 1600px) { .cf-tabs-5 .cf-tab-det { display: none; } }
@media (min-width: 761px) and (max-width: 1100px) { .cf-tabs-5 .cf-tab-det { display: inline; } }
.cv-btn-clip { flex: none; width: 44px; height: 44px; border-radius: 50%; }
.cv-adj-listo { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--tlc-blue-claro); color: #1F4E85; }
.cv-adj-listo > span { flex: 1; min-width: 0; }
.cv-adj-listo b { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-adj-listo small { display: block; font-size: 11.5px; }

/* Renglón «bots apagados» dentro de la franja de estado (como los pasos de Correos) */
.cv-pasos { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; padding: 9px 8px 9px 12px; margin-top: 2px; border-radius: 12px; background: var(--tlc-cream-2); border: 1px solid var(--tlc-border-2); }
.cv-pasos p { margin: 0; flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.45; color: var(--tlc-tinta-2); }
.cv-pasos p b { color: var(--tlc-navy); }
.cv-pasos a { font-weight: 700; }
.cv-pasos-sep { margin: 0 6px; color: var(--tlc-tinta-4); }
.cv-pasos-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex: none; background: #fff; color: var(--tlc-tinta-3); border: 1px solid var(--tlc-border); }
.cv-pasos-ic .ico { width: 15px; height: 15px; }
.cv-ventana-slot { display: contents; }
.cv-chat-pildoras .cv-ventana { min-height: 24px; padding: 2px 10px; font-size: 11.5px; }
@media (max-width: 640px) {
  .pn-viva .pn-viva-atencion { grid-column: 1 / -1; justify-self: start; }
}

/* =====================================================================
   Secciones por red (WhatsApp · Facebook · Instagram) y control por chat
   ===================================================================== */
/* Pestañas de Facebook e Instagram: Mensajes · Comentarios, con el estado de su bot y su contador */
.cv-pestanas { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.cv-pestanas::-webkit-scrollbar { display: none; }
.cv-pestanas[hidden] { display: none; }
.cv-pestana { flex: 0 1 320px; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 16px; border: 1px solid var(--tlc-border); background: #fff; color: inherit; text-align: left; box-shadow: var(--sombra-s); transition: border-color var(--t-rapida), box-shadow var(--t-rapida), background var(--t-rapida); }
.cv-pestana:hover { border-color: #D9C69C; box-shadow: var(--sombra); }
.cv-pestana.activa { background: var(--tlc-navy); border-color: var(--tlc-navy); box-shadow: 0 12px 26px -16px rgba(20, 32, 72, .75); }
.cv-pestana.activa:focus-visible { outline-color: var(--tlc-gold); }
.cv-pestana-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--cv-ms-claro); color: var(--cv-ms); }
.cv-pestana-ic .ico { width: 18px; height: 18px; }
.cv-pestana-ic.c-wa { background: var(--cv-wa-claro); color: var(--cv-wa); }
.cv-pestana-ic.c-ig { background: var(--cv-ig-claro); color: var(--cv-ig); }
.cv-pestana-ic.c-cf, .cv-pestana-ic.c-ci { background: var(--cv-cm-claro); color: var(--cv-cm); }
.cv-pestana.activa .cv-pestana-ic { background: rgba(255, 255, 255, .1); color: var(--tlc-gold); }
.cv-pestana-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.cv-pestana-txt b { font-family: var(--tlc-titulo); font-weight: 800; font-size: 14px; color: var(--tlc-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-pestana-txt .corto { display: none; }
.cv-pestana-txt small { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11.5px; color: var(--tlc-tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-pestana-txt small i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--tlc-tinta-4); }
.cv-pestana-txt small.tono-ok i { background: #34A36B; }
.cv-pestana-txt small.tono-alerta i { background: var(--tlc-gold); }
.cv-pestana-txt small.tono-peligro { color: var(--tlc-peligro); font-weight: 700; }
.cv-pestana-txt small.tono-peligro i { background: var(--tlc-peligro); }
.cv-pestana.activa .cv-pestana-txt b { color: #fff; }
.cv-pestana.activa .cv-pestana-txt small { color: rgba(255, 255, 255, .78); }
.cv-pestana.activa .cv-pestana-txt small.tono-peligro { color: #FFC2BF; }
.cv-pestana .cv-cuenta { flex: none; }

/* «Bot en este chat» + «Tomar el control» (siempre arriba del chat) */
.cv-chat-control { flex: none; position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; padding: 10px 20px 12px; background: #fff; border-bottom: 1px solid var(--tlc-border-2); }
.cv-chat-control:empty { display: none; }
.cv-control-fila { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.cv-bot-chat { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 11px; padding: 7px 14px 7px 9px; border-radius: 14px; border: 1px solid var(--tlc-border); background: #FCFAF5; cursor: pointer; transition: border-color var(--t-rapida), background var(--t-rapida); }
.cv-bot-chat:hover { border-color: #D9C69C; }
.cv-bot-chat.bloqueado { cursor: default; }
.cv-bot-chat.bloqueado:hover { border-color: var(--tlc-border); }
.cv-bot-chat .interruptor:disabled { cursor: not-allowed; opacity: .6; }
.cv-bot-chat-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cv-bot-chat-txt b { font-size: 13.5px; color: var(--tlc-navy); }
.cv-bot-chat-txt small { font-size: 12px; color: var(--tlc-tinta-3); overflow-wrap: anywhere; }
.cv-bot-chat.tono-ok .cv-bot-chat-txt small { color: #22603F; }
.cv-bot-chat.tono-alerta .cv-bot-chat-txt small { color: #6B4B05; }
.cv-bot-chat.tono-apagado { background: #F1EEE7; border-color: #DCD5C6; }
.cv-bot-chat.tono-apagado .cv-bot-chat-txt small { color: #3D4555; font-weight: 600; }
.cv-control-fila .cv-btn-control { flex: none; }
.cv-control-estado { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; background: var(--tlc-blue-claro); color: #245A96; font-size: 13px; font-weight: 700; white-space: nowrap; }
.cv-control-estado .ico { width: 15px; height: 15px; }
.cv-control-ayuda { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--tlc-tinta-3); }
.cv-control-ayuda .ico { flex: none; width: 13px; height: 13px; margin-top: 2px; }
.cv-control-ayuda b { color: var(--tlc-tinta-2); font-weight: 700; }

/* Aviso grande de quién tiene el control (y el de la respuesta pública programada de un comentario) */
.cv-aviso-control { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; border: 1px solid #C9DAF0; background: var(--tlc-blue-claro); }
.cv-aviso-control > div { flex: 1 1 240px; min-width: 0; }
.cv-aviso-control b { display: block; font-size: 14px; line-height: 1.3; color: #1F4E85; }
.cv-aviso-control small { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.45; color: #2B5A8E; }
.cv-aviso-control > .btn { flex: none; }
.cv-aviso-control-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: #fff; color: var(--tlc-blue); }
.cv-aviso-control-ic .ico { width: 17px; height: 17px; }
.cv-aviso-control.humano { border-color: #9DBDE3; box-shadow: inset 4px 0 0 var(--tlc-blue); }
.cv-aviso-control.pausa { background: #FFF8E8; border-color: #F0D58A; }
.cv-aviso-control.pausa b { color: #5A3F04; }
.cv-aviso-control.pausa small { color: #6B4B05; }
.cv-aviso-control.pausa .cv-aviso-control-ic { color: var(--tlc-gold-osc); }
.cv-aviso-control.apagado { background: #F4F2EC; border-color: var(--tlc-border); }
.cv-aviso-control.apagado b { color: var(--tlc-navy); }
.cv-aviso-control.apagado small { color: var(--tlc-tinta-2); }
.cv-aviso-control.apagado .cv-aviso-control-ic { color: var(--tlc-tinta-2); }
.cv-com-programado { margin: 12px 0 0; }

/* Lo que falta para encender los bots de la sección */
.cv-pasos-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cv-pasos .cv-pasos-txt p { flex: none; }
.cv-falta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cv-falta li { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; line-height: 1.45; color: #6B4B05; }
.cv-falta .ico { flex: none; width: 13px; height: 13px; margin-top: 2px; color: var(--tlc-gold-osc); }
.cv-falta-acc { font-size: 12.5px; }

/* Comentarios: cómo contestar tú o que nadie conteste */
.cv-com-acc { flex-direction: column; align-items: stretch; gap: 8px; }
.cv-com-ayuda { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 12px; line-height: 1.45; color: var(--tlc-tinta-2); }
.cv-com-ayuda .ico { flex: none; width: 13px; height: 13px; margin-top: 2px; color: var(--tlc-blue); }
.cv-com-ayuda b { color: var(--tlc-navy); }
.cv-com-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* «Al enviar tu respuesta se quita el rojo.» (TLC.rojo.notaEditor) en un comentario rojo: el espacio lo da el gap. */
.cv-com-acc > .in-nota-editor { margin: 0; }

/* #conversaciones y #redes mientras redirigen */
.cv-redirige { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 48px 16px; font-size: 13.5px; color: var(--tlc-tinta-3); }

@media (max-width: 1180px) {
  .cv-chat-control { padding: 10px 14px 12px; }
}
@media (max-width: 860px) {
  .cv:has(.cv-bandeja[data-movil="hilo"]) .cv-pestanas { display: none; }
  .cv-pestana { flex: 1 1 0; padding: 9px 10px 9px 8px; gap: 9px; }
  .cv-pestana-ic { width: 32px; height: 32px; border-radius: 10px; }
  .cv-chat-control { padding: 10px 12px 12px; }
  .cv-control-fila .cv-btn-control { flex: 1 1 auto; }
}
@media (max-width: 560px) {
  .cv-pestana-txt .largo { display: none; }
  .cv-pestana-txt .corto { display: inline; }
  .cv-bot-chat { flex-basis: 100%; }
  .cv-control-fila .cv-btn-control, .cv-control-estado { flex: 1 1 100%; justify-content: center; }
  .cv-aviso-control > .btn { flex: 1 1 100%; }
  .cv-com-btns .btn { flex: 1 1 auto; }
  .cv-com-sep { display: none; }
}
@media (max-width: 420px) {
  .cv-pestana-ic { display: none; }
  .cv-pestana { padding-left: 12px; }
}

/* =====================================================================
   Metricool al día: «Revisar ahora» en Facebook e Instagram, lo de antes de conectar («Historial») y el bloque
   «Mensajes y comentarios» de Configuración › Meta › Metricool
   ===================================================================== */
.cv-estado-revisar { flex: none; }
/* Dentro del chat: dónde empieza y dónde termina lo de antes de conectar Metricool */
.cv-hist-sep { align-self: stretch; display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; font-size: 11.5px; font-weight: 600; line-height: 1.35; color: var(--tlc-tinta-3); }
.cv-hist-sep::before, .cv-hist-sep::after { content: ''; flex: 1 1 24px; height: 1px; background: var(--tlc-border); }
.cv-hist-sep .ico { flex: none; width: 13px; height: 13px; }
.cv-hist-sep span { flex: 0 1 auto; min-width: 0; text-align: center; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 2px rgba(28, 43, 94, .08); }
.cv-hist-sep.fin { color: var(--tlc-navy); }

.mc-bandeja { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--tlc-border-2); background: var(--tlc-cream-2); }
.mc-bandeja-cab { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.mc-bandeja-cab h4 { display: flex; align-items: center; gap: 7px; margin: 0; font-family: var(--tlc-titulo); font-size: 14px; font-weight: 800; color: var(--tlc-navy); }
.mc-bandeja-rev { font-size: 12px; color: var(--tlc-tinta-3); }
.mc-bandeja [aria-live]:empty { display: none; }
.mc-bandeja > p { margin: 0; }
.mc-hist { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; line-height: 1.45; color: var(--tlc-tinta-2); }
.mc-hist .ico { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--tlc-tinta-3); }
.mc-hist.ok .ico { color: var(--tlc-exito); }
.mc-hist a { font-weight: 700; }

@media (max-width: 560px) {
  .cv-estado-revisar { flex: 1 1 100%; justify-content: center; }
  .mc-bandeja { padding: 12px; }
  .mc-bandeja .cf-llaves-pie .btn { flex: 1 1 100%; justify-content: center; }
}

/* =====================================================================
   Integración (19-oct-2026): con la franja «Bot en este chat» arriba de cada chat, en pantallas bajas los mensajes
   se quedaban sin alto. En escritorio y tableta los mensajes guardan un alto mínimo y, si no cabe todo, la columna
   del chat hace scroll (el celular ya hace scroll de página).
   ===================================================================== */
@media (min-width: 861px) {
  .cv-chat-marco { overflow-y: auto; }
  .cv-msjs { min-height: 170px; }
}

/* =====================================================================
   Revisión del 20-oct-2026
   - «Ver solo pruebas» encendido: franja que lo dice, con la salida a los chats reales.
   - Celular (≤860 px): con una respuesta propuesta por el bot, la caja de abajo deja de quedarse fija (si no, junto con
     la barra del hub y el encabezado del chat, tapaba la conversación); en pantallas bajas el encabezado tampoco se fija
     («Atrás» del teléfono regresa a la lista).
   ===================================================================== */
.cv-solo-pruebas { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 8px 14px; background: var(--tlc-gold-claro); border-bottom: 1px solid #F3DD9E; color: #6B4B05; font-size: 12.5px; line-height: 1.4; }
.cv-solo-pruebas .ico { width: 14px; height: 14px; flex: none; }
.cv-solo-pruebas .enlace { font-weight: 700; }
@media (max-width: 860px) {
  .cv-comp:has(.cv-borrador) { position: static; }
  /* Con respuesta del bot por aprobar, el encabezado del chat tampoco se queda fijo (si no, junto con la barra del hub,
     casi no quedaba espacio para leer los mensajes antes de aprobar). */
  .cv-chat-marco:has(.cv-borrador) .cv-chat-cab { position: static; }
  .cv-borrador-cab small { display: none; }
  /* Al abrir, la página baja sola al último mensaje: en un chat corto, los mensajes quedan pegados a la caja de escribir
     (no arriba de un hueco, escondidos detrás del encabezado). Los comentarios se leen de arriba abajo, como siempre. */
  .cv-msjs:not(.cv-com-cuerpo) { display: flex; flex-direction: column; justify-content: flex-end; }
  .cv-msjs:not(.cv-com-cuerpo) > .cv-msjs-cuerpo { width: 100%; }
}
@media (max-width: 860px) and (max-height: 760px) {
  .cv-chat-cab { position: static; }
}



/* =====================================================================
   «Traer conversaciones anteriores» de Facebook e Instagram con la app de Meta (20-oct-2026)
   ===================================================================== */
/* Al pie de la franja de estado de cada sección (conversaciones.js): el botón y lo que pasó la última vez; en WhatsApp,
   una nota (Meta no deja traer los chats de antes de un número nuevo). */
.cv-ant { flex: 1 1 100%; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 8px 8px 8px 12px; margin-top: 2px; border-radius: 12px; background: var(--tlc-cream-2); border: 1px solid var(--tlc-border-2); }
.cv-ant-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex: none; background: #fff; color: var(--tlc-tinta-3); border: 1px solid var(--tlc-border); }
.cv-ant-ic .ico { width: 15px; height: 15px; }
.cv-ant-txt { flex: 1 1 260px; min-width: 0; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--tlc-tinta-2); overflow-wrap: anywhere; }
.cv-ant-txt b { color: var(--tlc-navy); }
.cv-ant-err, .cv-ant-nota { display: block; margin-top: 3px; }
.cv-ant-err { color: #6B4B05; }
.cv-ant-nota { color: var(--tlc-tinta-3); }
.cv-ant.alerta { background: #FFF8E8; border-color: #F0D58A; }
.cv-ant.alerta .cv-ant-ic { color: var(--tlc-gold-osc); border-color: #F0D58A; }
.cv-ant > .btn { flex: none; }
/* Con la nota de «solo pruebas» se puede resumir a una línea («×», mientras dure la sesión). */
.cv-ant > .cv-ant-cerrar { margin-left: -6px; color: var(--tlc-tinta-3); }
/* Una sola línea: la última vez salió bien y no hay nada que avisar (o el dueño la resumió). */
.cv-ant.corta { padding: 4px 6px 4px 10px; gap: 6px 10px; }
.cv-ant.corta .cv-ant-ic { width: 24px; height: 24px; border-radius: 8px; }
.cv-ant.corta .cv-ant-txt { flex-basis: 200px; }
.cv-ant.corta .enlace { font-size: 12.5px; font-weight: 700; }
@media (max-width: 560px) {
  .cv-ant { padding: 10px; }
  .cv-ant > .btn { flex: 1 1 100%; justify-content: center; }
  /* «×» en la esquina (sin empujar el ícono ni el texto). */
  .cv-ant:has(> .cv-ant-cerrar) { position: relative; padding-right: 38px; }
  .cv-ant > .cv-ant-cerrar { position: absolute; top: 6px; right: 6px; margin: 0; flex: none; }
  .cv-ant.corta { padding: 6px 8px; }
  .cv-ant.corta > .btn { flex: none; margin-left: auto; }
}
/* Chat traído de antes al que nadie contestó y que todavía se puede contestar (ventana abierta). */
.cv-motivo.hist-abierta { background: var(--tlc-gold-claro); color: #6B4B05; }
/* «Ver más» al final de «Todas», «Resueltas» y «Todos». */
.cv-items li.cv-mas { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px 10px; text-align: center; }
.cv-mas p { margin: 0; font-size: 12.5px; color: var(--tlc-tinta-3); }
/* Dentro del paso «Conectar Facebook e Instagram» de «Tu avance» (config-meta.js). */
.cm-hist { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding: 12px 14px; border-radius: 14px; background: #FBF8F2; border: 1px solid var(--tlc-border); }
.cm-hist-cab { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--tlc-navy); }
.cm-hist-cab .ico { color: var(--tlc-blue); }
.cm-hist-cuando { font-size: 12px; color: var(--tlc-tinta-3); }
.cm-hist-txt { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--tlc-tinta-2); }
.cm-hist-redes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cm-hist-redes li { display: flex; gap: 4px 10px; align-items: baseline; flex-wrap: wrap; font-size: 12.5px; line-height: 1.5; color: var(--tlc-tinta-2); }
.cm-hist-redes li b { flex: none; min-width: 74px; color: var(--tlc-navy); }
.cm-hist-redes li span { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.cm-hist-redes li.alerta span { color: #6B4B05; }
.cm-hist-pie { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 560px) { .cm-hist-pie .btn { flex: 1 1 100%; justify-content: center; } }

/* =====================================================================
   «Necesita a una persona» (rojo, ESPEC §10) en las secciones WhatsApp, Facebook e Instagram. Los componentes (píldora,
   tira, caja roja, marca de la burbuja, fila .cv-item.rojo, carpeta .cv-filtro.rojo y sus números) viven en
   intervencion.css; aquí solo su lugar dentro de la bandeja.
   ===================================================================== */
/* La tira «{n} necesitan a una persona · Ver» arriba de la lista de las demás carpetas. */
.cv-lista-tira { flex: none; padding: 10px 12px 0; }
.cv-lista-tira .in-tira { margin: 0 0 2px; }
/* La caja roja arriba del control del chat. */
.cv-chat-rojo { flex: none; position: relative; z-index: 2; padding: 12px 20px 0; background: #fff; }
.cv-chat-rojo .in-banner { margin: 0; padding: 12px 14px; gap: 10px 12px; }
/* Dentro del chat, compacta (así la conversación sigue a la vista): ícono más chico y el texto de cada canal seguido. */
.cv-chat-rojo .in-banner-ic { width: 30px; height: 30px; }
.cv-chat-rojo .in-banner-ic .ico { width: 16px; height: 16px; }
.cv-chat-rojo .in-banner-cuerpo { gap: 2px; font-size: 12.5px; }
.cv-chat-rojo .in-banner-tit { font-size: 14.5px; }
/* El mensaje que puso el chat en rojo: su marca va arriba de la burbuja. */
.cv-fila.marcada { margin-top: 6px; gap: 6px; }
.cv-fila.marcada .in-burbuja { outline-offset: 2px; }
.cv-marca-rojo { display: inline-flex; max-width: 100%; }
/* El comentario en rojo: la caja va arriba de la publicación. */
.cv-com-cuerpo .in-banner { margin: 0 0 4px; }
/* «Ya lo atendí» en el encabezado (en lugar de «Resolver»). */
.cv-btn-atendi { border-color: var(--tlc-persona-borde, #EFC2BF); color: var(--tlc-persona-texto, #8F2D29); }
.cv-btn-atendi .ico { color: var(--tlc-persona, #B83B36); }
.cv-btn-atendi:hover { background: var(--tlc-persona-fondo, #FBE9E8); }
/* Simulador: «Lo pondría en rojo». */
.cv-sim-dec.rojo { background: var(--tlc-persona-fondo, #FBE9E8); color: var(--tlc-persona-texto, #8F2D29); box-shadow: inset 4px 0 0 var(--tlc-persona, #B83B36); }
@media (max-width: 1180px) {
  .cv-chat-rojo { padding: 10px 14px 0; }
}
@media (max-width: 860px) {
  .cv-chat-rojo { padding: 10px 12px 0; }
  .cv-lista-tira { padding: 8px 10px 0; }
}

/* =====================================================================
   Ronda 2 (ESPEC2 §4.6, §5.4–§5.6, §6, §8 y §9): dos carpetas arriba de la lista con «Mostrar:», los grupos de
   «Requiere atención», «Ver solo pruebas» al pie de la lista, el chat «Vino de una llamada» (morado), WhatsApp sin
   conectar, «Solo lo contesta una persona» (azul), los comentarios de anuncios y la caja de Instagram.
   Contraste: --tlc-llamada-texto sobre --tlc-llamada-fondo 8.1:1 · #245A96 sobre --tlc-blue-claro 6.2:1 · #6B4B05 sobre
   --tlc-gold-claro 7.4:1 · blanco sobre --tlc-navy 13:1 · --tlc-atencion-texto sobre #FCFAF5 6.6:1.
   ===================================================================== */
/* La bandeja: [carpetas + lista] | chat. La zona 1 ya no es una columna: va arriba de la lista. */
.cv-bandeja { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "zona1 chat" "lista chat"; }
.cv-zona1 { grid-area: zona1; gap: 8px; overflow: visible; padding: 14px 12px 12px; background: #FCFAF5; border-right: 1px solid var(--tlc-border-2); border-bottom: 1px solid var(--tlc-border-2); }
.cv-lista { grid-area: lista; }
.cv-chat { grid-area: chat; }
/* Las dos carpetas (role="tablist"): «Requiere atención» con su número y «Mensajes» (o «Comentarios»). */
.cv-carpetas2 { display: flex; gap: 4px; padding: 3px; border-radius: 13px; background: #F1EBDD; }
.cv-carp { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--tlc-tinta-2); font-weight: 700; font-size: 13px; transition: background var(--t-rapida), color var(--t-rapida); }
.cv-carp.atencion { flex-grow: 1.6; }
.cv-carp:hover { background: rgba(255, 255, 255, .85); color: var(--tlc-navy); }
.cv-carp.activa { background: var(--tlc-navy); color: #fff; box-shadow: 0 6px 14px -8px rgba(28, 43, 94, .65); }
.cv-carp.activa:focus-visible { outline-color: var(--tlc-gold); }
.cv-carp-ic { display: inline-grid; place-items: center; flex: none; color: var(--tlc-tinta-3); }
.cv-carp-ic .ico { width: 16px; height: 16px; }
.cv-carp.atencion:not(.activa) .cv-carp-ic { color: var(--tlc-atencion-texto, #8F4510); }
.cv-carp.activa .cv-carp-ic { color: var(--tlc-gold); }
.cv-carp-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-carp .cv-cuenta { flex: none; }
/* «Mostrar:» de la segunda carpeta. */
.cv-mostrar { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; font-weight: 700; color: var(--tlc-tinta-2); }
.cv-mostrar > span { flex: none; }
.cv-mostrar .select { flex: 1; min-width: 0; height: 34px; font-size: 13px; }
/* «Necesitan a una persona · n» y «Lo demás que espera · m» dentro de «Requiere atención». */
.cv-items li.cv-grupo { padding: 12px 10px 4px; }
.cv-items li.cv-grupo:first-child, .cv-items li.cv-grupo + li { border-top-color: transparent; }
.cv-grupo h3 { display: flex; align-items: center; gap: 6px; margin: 0; font-family: var(--tlc-titulo); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tlc-atencion-texto, #8F4510); }
.cv-grupo-rojo h3 { color: var(--tlc-persona-texto, #8F2D29); }
.cv-grupo h3 .ico { width: 13px; height: 13px; flex: none; }
.cv-grupo p { margin: 2px 0 0 19px; font-size: 11.5px; line-height: 1.4; color: var(--tlc-tinta-3); }
/* «Ver solo pruebas» al pie de la lista. */
.cv-lista-pie { flex: none; display: flex; align-items: center; justify-content: flex-end; padding: 8px 12px; border-top: 1px solid var(--tlc-border-2); background: #FCFAF5; }

/* Chat «Vino de una llamada»: lo que entendió Sofía, arriba de las burbujas (no es un mensaje). */
.cv-llamada { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--tlc-llamada-fondo, #EFEAF8); border: 1px solid #DDD3F1; box-shadow: inset 4px 0 0 var(--tlc-llamada, #6D4BB8); color: var(--tlc-llamada-texto, #4E3391); }
.cv-llamada-cab { display: flex; align-items: center; gap: 8px; font-size: 13.5px; line-height: 1.35; }
.cv-llamada-cab b { font-weight: 800; overflow-wrap: anywhere; }
.cv-llamada-cab .in-llamada, .cv-llamada-cab > .ico { flex: none; }
.cv-llamada-datos { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.cv-llamada-datos b { font-weight: 700; }
.cv-llamada-datos small { display: block; font-size: 11.5px; opacity: .92; }
.cv-llamada-pie { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: 10px; }
.cv-llamada-pie .enlace { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font-size: 13px; font-weight: 700; color: var(--tlc-llamada-texto, #4E3391); }
/* En el encabezado del chat: la bolita con su texto. */
.cv-de-llamada { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 6px; border-radius: 999px; background: var(--tlc-llamada-fondo, #EFEAF8); color: var(--tlc-llamada-texto, #4E3391); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
/* WhatsApp todavía sin conectar al hub: en lugar de la caja de escribir, «Abrir WhatsApp en tu celular». */
.cv-sin-wa { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: #F7F4EE; border: 1px solid var(--tlc-border-2); }
.cv-sin-wa-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--cv-wa-claro); color: var(--cv-wa); }
.cv-sin-wa-ic .ico { width: 18px; height: 18px; }
.cv-sin-wa-txt { flex: 1 1 240px; min-width: 0; }
.cv-sin-wa-txt b { display: block; font-size: 13.5px; color: var(--tlc-navy); }
.cv-sin-wa-txt small { display: block; font-size: 12.5px; line-height: 1.45; color: var(--tlc-tinta-3); }
.cv-sin-wa-txt .cv-sin-wa-nota { margin-top: 2px; }
.cv-sin-wa > .btn { flex: none; }
/* Plantilla con número dictado en la llamada: la casilla obligatoria. */
.cv-pl-numero { align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--tlc-llamada-fondo, #EFEAF8); border: 1px solid #DDD3F1; }
.cv-pl-numero b { display: block; font-weight: 700; color: var(--tlc-llamada-texto, #4E3391); }
.cv-pl-numero small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--tlc-tinta-2); }

/* «Solo lo contesta una persona»: aviso azul en el chat y en el comentario; el botón junto a «Tomar el control». */
.cv-aviso-control.solo { border-color: #9DBDE3; box-shadow: inset 4px 0 0 #245A96; }
.cv-aviso-control.solo .cv-aviso-control-ic { color: #245A96; }
.cv-btn-solo { height: 38px; padding: 0 14px; }
.cv-control-fila .cv-btn-solo { flex: none; }
.cv-com-solo { margin: 0 0 12px; }
/* «Más acciones» de un comentario. */
.cv-masacc { position: relative; }
.cv-masacc > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; padding: 0; color: var(--tlc-tinta-2); }
.cv-masacc > summary::-webkit-details-marker { display: none; }
.cv-masacc[open] > summary { background: #fff; }
.cv-masacc-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 6; width: 300px; max-width: calc(100vw - 48px); padding: 6px; border-radius: 14px; background: #fff; border: 1px solid var(--tlc-border); box-shadow: var(--sombra-l); }
.cv-masacc-item { width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 10px; border: 0; border-radius: 10px; background: transparent; text-align: left; color: inherit; }
.cv-masacc-item:hover { background: var(--tlc-cream-2); }
.cv-masacc-item .ico { flex: none; margin-top: 2px; color: var(--tlc-blue); }
.cv-masacc-item b { display: block; font-size: 13px; color: var(--tlc-navy); }
.cv-masacc-item small { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.4; color: var(--tlc-tinta-3); }

/* Comentarios de anuncios: el chip, «Anuncio: {nombre}» y «Ver anuncio». */
.cv-cat-anuncio { gap: 4px; background: var(--tlc-gold-claro); color: #6B4B05; box-shadow: none; }
.cv-cat-anuncio .ico { width: 11px; height: 11px; flex: none; }
.cv-pub.anuncio { border-color: #F0D58A; background: #FFFCF3; }
.cv-pub.anuncio > .ico { color: var(--tlc-gold-osc); }
.cv-pub.anuncio .etq { color: #6B4B05; letter-spacing: .06em; }
.cv-ver-anuncio { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; margin-top: 4px; font-size: 12.5px; font-weight: 700; }

/* Instagram en 0: la caja fija arriba de la sección (no es una falla del hub). */
.cv-aviso-ig:empty { display: none; }
.cv-ig { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--radio); background: #fff; border: 1px solid var(--tlc-border); box-shadow: inset 4px 0 0 var(--cv-ig), var(--sombra-s); }
.cv-ig-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--cv-ig-claro); color: var(--cv-ig); }
.cv-ig-ic .ico { width: 20px; height: 20px; }
.cv-ig-txt { flex: 1 1 320px; min-width: 0; }
.cv-ig-txt h2 { margin: 0; font-family: var(--tlc-titulo); font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--tlc-navy); }
.cv-ig-txt > p { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--tlc-tinta-2); }
.cv-ig-pasos { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 6px 16px; }
.cv-ig-pasos li { display: flex; align-items: flex-start; gap: 7px; min-width: 0; font-size: 12.5px; line-height: 1.45; color: var(--tlc-tinta-2); overflow-wrap: anywhere; }
.cv-ig-pasos li .ico { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--tlc-tinta-3); }
.cv-ig-pasos li.hecho .ico { color: var(--tlc-exito); }
.cv-ig-rev { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--tlc-cream-2); font-size: 12.5px; line-height: 1.45; color: var(--tlc-tinta-2); overflow-wrap: anywhere; }
.cv-ig-rev .ico { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--tlc-blue); }
.cv-ig-acc { flex: none; display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 1180px) {
  .cv-bandeja { grid-template-columns: minmax(270px, 330px) minmax(0, 1fr); }
  .cv-zona1 { grid-area: zona1; padding: 12px 10px 10px; border-right: 1px solid var(--tlc-border-2); }
  .cv-masacc-menu { right: auto; left: 0; }
}
@media (max-width: 860px) {
  .cv-zona1 { border-right: 0; }
  .cv-ig-acc { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .cv-ig-acc .btn { flex: 1 1 auto; justify-content: center; }
  .cv-control-fila .cv-btn-solo { flex: 1 1 auto; }
  .cv-lista-pie { border-radius: 0 0 var(--radio) var(--radio); }
}
@media (max-width: 560px) {
  .cv-control-fila .cv-btn-solo { flex: 1 1 100%; justify-content: center; }
  .cv-sin-wa > .btn { flex: 1 1 100%; justify-content: center; }
  .cv-llamada-pie .btn { flex: 1 1 auto; justify-content: center; }
  /* «Más acciones» abierto: el menú baja dentro de la fila (no se sale de la pantalla). */
  .cv-masacc[open] { flex: 1 1 100%; }
  .cv-masacc-menu { position: static; width: 100%; max-width: none; margin-top: 6px; box-shadow: var(--sombra-m); }
  .cv-ig { padding: 12px; gap: 10px 12px; }
}
@media (max-width: 420px) {
  .cv-carp-ic { display: none; }
}