/* ================================================================
   BANDEJA DE WHATSAPP — estilo visual pensado para parecerse a la app
   real de WhatsApp (mismos colores de burbuja, avatar circular, barra
   de escritura tipo píldora), para que a un empleado acostumbrado a
   WhatsApp le sea más fácil de usar sin tener que aprender una UI
   distinta. La lógica vive en public/js/whatsapp-inbox.js.
   ================================================================ */

/* La bandeja reemplaza el padding/scroll genérico de .vit-carrito-drop-completo
   (pensado para formularios) por un layout propio a pantalla completa: el
   scroll pasa a vivir en .wa-lista / .wa-chat-fondo, no en este contenedor. */
#vit-whatsapp-drop-body.vit-carrito-drop-completo {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Barra superior en verde WhatsApp (en vez del genérico morado que usan
   el resto de los dropdowns de FixHub) — para que el panel se sienta
   como la app real desde el primer vistazo. */
#vit-whatsapp-dropdown .vit-carrito-drop-header {
  background: #202c33;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
#vit-whatsapp-dropdown .vit-carrito-drop-titulo i { color: #25d366; }

/* Pulso breve del badge del ícono de la navbar cuando llega una
   conversación nueva esperando respuesta — ver _actualizarBadgeWhatsapp. */
@keyframes wa-pulso-badge {
  0% { transform: scale(1); }
  30% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
#vit-whatsapp-badge-nav.wa-badge-pulso { animation: wa-pulso-badge 0.4s var(--ease-apple, ease); }

/* Resalta la subcadena que coincide con la búsqueda, ver
   _resaltarCoincidenciaWhatsapp en whatsapp-inbox.js. */
.wa-resaltado { background: rgba(37, 211, 102, 0.35); color: #fff; border-radius: 2px; }

/* El scroll usa la clase genérica .scroll-morado (ver utilidades.css)
   en vez de un ::-webkit-scrollbar propio acá — así se ve igual al
   resto de FixHub en lugar de la barra gris nativa del navegador. */
.wa-lista { flex: 1; min-height: 0; overflow-y: auto; }

.wa-hilo-wrap { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* ── Buscador arriba de la lista, como "Buscar o empezar un chat
   nuevo" de WhatsApp — filtra en el cliente, sin golpear el servidor
   de nuevo (la lista completa ya está cargada). ── */
.wa-buscador-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #202c33;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.wa-buscador-wrap i { color: #8696a0; font-size: 15px; flex-shrink: 0; }
.wa-buscador {
  flex: 1;
  height: 32px;
  padding: 0 4px;
  border: none;
  background: transparent;
  color: #e9edef;
  font-size: 13.5px;
  outline: none;
}
.wa-buscador::placeholder { color: #8696a0; }

/* ── Separador de fecha ("Hoy" / "Ayer" / fecha) entre mensajes de
   distintos días, como los hilos reales de WhatsApp. ── */
.wa-separador-fecha {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin: 10px 0;
}
.wa-separador-fecha span {
  background: #202c33;
  color: #8696a0;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

.wa-conv-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.12s var(--ease-apple, ease);
}
.wa-conv-item:hover { background: rgba(255,255,255,0.04); }
/* Último chat abierto: se queda resaltado al volver a la lista, igual
   que el chat seleccionado en WhatsApp Web. */
.wa-conv-item.wa-conv-activo { background: rgba(37, 211, 102, 0.08); }
.wa-conv-item.wa-conv-activo:hover { background: rgba(37, 211, 102, 0.12); }

/* El color de fondo lo pone inline _htmlAvatarWhatsapp() (un color fijo
   por contacto, como WhatsApp/Telegram) — acá solo el layout. */
.wa-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  flex-shrink: 0;
}
/* Punto verde sobre el avatar cuando la conversación espera respuesta
   — el mismo indicador de "no leído" que WhatsApp pone en la miniatura. */
.wa-conv-item.wa-necesita-atencion .wa-avatar::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #25d366;
  border: 2px solid #202c33;
}

/* padding-right: deja espacio para el botón "..." (position:absolute,
   ver .wa-conv-menu-btn) que ahora es siempre visible — antes no hacía
   falta porque el botón solo aparecía en hover, encima del contenido. */
.wa-conv-info { flex: 1; min-width: 0; padding-right: 26px; }
.wa-conv-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.wa-conv-nombre { font-size: 14.5px; font-weight: 600; color: #e9edef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-conv-hora { font-size: 11.5px; color: #8696a0; flex-shrink: 0; }
/* Conversación esperando respuesta humana: nombre y hora en verde
   WhatsApp + negrita, igual que un chat "no leído" en la app real. */
.wa-conv-item.wa-necesita-atencion .wa-conv-nombre { color: #e9edef; }
.wa-conv-item.wa-necesita-atencion .wa-conv-hora { color: #25d366; font-weight: 700; }
.wa-conv-sub { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; }
.wa-conv-preview {
  font-size: 12.5px;
  color: #8696a0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa-conv-item.wa-necesita-atencion .wa-conv-preview { color: #d1d7db; }

.wa-estado-chip {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.wa-estado-bot     { background: rgba(37, 211, 102, 0.18); color: #25d366; }
.wa-estado-humano  { background: #25d366; color: #fff; }

/* ── Hilo de conversación: fondo oscuro tipo WhatsApp, no el gris
   plano del resto de la app — así las burbujas resaltan igual que en
   la app real. ── */
.wa-chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #202c33;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.wa-chat-header-info { flex: 1; min-width: 0; }
.wa-chat-header-clic {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border-radius: 8px;
  padding: 4px 6px;
  margin: -4px -6px;
  transition: background 0.12s var(--ease-apple, ease);
}
.wa-chat-header-clic:hover { background: rgba(255,255,255,0.06); }
.wa-chat-header-nombre { font-size: 14.5px; font-weight: 600; color: #e9edef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-chat-header-numero { font-size: 12px; color: #8696a0; }

.wa-chat-fondo {
  position: relative;
  flex: 1;
  min-height: 0; /* si no, un flex item con overflow crece al alto de su
    contenido en vez de recortarse y scrollear (bug clásico de flexbox:
    min-height:auto por defecto) — con esto SÍ se puede hacer scroll. */
  overflow-y: auto;
  padding: 14px 10px;
  background-color: #0b141a;
  /* "Papel tapiz" con el mismo doodle repetido de WhatsApp (hojas,
     tazas, notas musicales…) a muy baja opacidad — de lejos es
     indistinguible del fondo real del chat, no un degradado genérico. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.4' opacity='0.035'%3E%3Cpath d='M20 30c8-10 22-10 28 0s2 22-8 24-22-4-20-14 10-12 10-12'/%3E%3Ccircle cx='140' cy='40' r='10'/%3E%3Cpath d='M132 40h16M140 32v16'/%3E%3Cpath d='M60 110c0-14 12-24 24-20s16 20 4 28-26-2-24-14'/%3E%3Cpath d='M170 120c6-8 18-8 20 2s-6 16-14 12'/%3E%3Cpath d='M20 170q10-14 24-6t2 24q-16 8-22-6'/%3E%3Cpath d='M150 190c4-10 16-14 24-6'/%3E%3Ccircle cx='190' cy='70' r='4'/%3E%3Ccircle cx='60' cy='10' r='4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 220px 220px;
  background-repeat: repeat;
}

/* Entrada suave de los mensajes al renderizar el hilo (apertura o
   refresco), como el pequeño "pop" con el que WhatsApp hace aparecer
   los mensajes nuevos en vez de que salten de golpe. */
@keyframes wa-fila-aparece {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wa-fila { display: flex; margin-bottom: 8px; animation: wa-fila-aparece 0.18s var(--ease-apple, ease) both; }
.wa-fila-in  { justify-content: flex-start; }
.wa-fila-out { justify-content: flex-end; }
/* Mensajes consecutivos de la misma persona quedan más pegados entre
   sí (como agrupa WhatsApp), y solo el primero del grupo lleva la
   "colita" — ver wa-agrupado en whatsapp-inbox.js. */
.wa-fila.wa-agrupado { margin-bottom: 2px; }

.wa-burbuja {
  max-width: 70%;
  padding: 6px 9px 7px 9px;
  border-radius: 8px;
  font-size: 13.6px;
  line-height: 1.35;
  color: #e9edef;
  position: relative;
  box-shadow: 0 1px 1px rgba(0,0,0,0.3);
  transition: filter 0.1s var(--ease-apple, ease);
}
.wa-burbuja:hover { filter: brightness(1.08); }
.wa-burbuja-in  { background: #202c33; border-top-left-radius: 0; }
.wa-burbuja-out { background: #005c4b; border-top-right-radius: 0; }
.wa-fila.wa-agrupado .wa-burbuja-in,
.wa-fila.wa-agrupado .wa-burbuja-out { border-top-left-radius: 8px; border-top-right-radius: 8px; }

/* Foto/video sin texto: la imagen llena casi toda la burbuja (como
   WhatsApp) y la hora flota encima en una píldora semitransparente, en
   vez de quedar abajo con el mismo padding que un mensaje de texto. */
.wa-burbuja.wa-burbuja-solo-media { padding: 3px; }
.wa-burbuja.wa-burbuja-solo-media .wa-burbuja-hora {
  position: absolute;
  bottom: 7px;
  right: 7px;
  margin-top: 0;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(0,0,0,0.45);
}

/* Colita del globo, solo en el primer mensaje de cada grupo — el
   pequeño triángulo que hace que una burbuja se vea "de WhatsApp" y
   no un simple rectángulo redondeado. */
.wa-fila:not(.wa-agrupado) .wa-burbuja-in::before,
.wa-fila:not(.wa-agrupado) .wa-burbuja-out::before {
  content: '';
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-top: 8px solid;
}
.wa-fila:not(.wa-agrupado) .wa-burbuja-in::before {
  left: -7px;
  border-top-color: #202c33;
  border-left: 7px solid transparent;
}
.wa-fila:not(.wa-agrupado) .wa-burbuja-out::before {
  right: -7px;
  border-top-color: #005c4b;
  border-right: 7px solid transparent;
}

/* Check de "enviado" en los mensajes salientes — un solo visto gris,
   como WhatsApp antes de la confirmación de entrega/lectura (el color
   cambia a azul cuando el estado real, ver .wa-check-leido, llega por
   el webhook de recibos de Meta). */
.wa-burbuja-check { font-size: 13px; color: rgba(233,237,239,0.6); margin-left: 3px; vertical-align: -1px; }

.wa-media-img {
  display: block;
  max-width: 260px;
  max-height: 320px;
  width: 100%;
  border-radius: 6px;
  cursor: pointer;
  object-fit: cover;
}
.wa-media-video {
  display: block;
  max-width: 260px;
  max-height: 320px;
  border-radius: 6px;
}
/* ── Reproductor de audio propio (nota de voz), en vez del <audio
   controls> nativo del navegador — mismo look compacto que WhatsApp:
   botón circular verde + barra de progreso + duración. ── */
.wa-audio-player {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
  padding: 2px 0;
}
.wa-audio-elemento { display: none; }
.wa-audio-play {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  border: none;
  background: #00a884;
  color: #0b141a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
}
.wa-audio-play:hover { background: #06cf9c; }
.wa-audio-progreso {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.18);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}
.wa-audio-progreso-relleno { height: 100%; width: 0%; background: #00a884; border-radius: 2px; }
.wa-audio-tiempo { font-size: 11px; color: #8696a0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wa-media-doc {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: #e9edef;
  text-decoration: none;
  font-size: 13px;
}
.wa-media-doc i { font-size: 20px; color: #8696a0; flex-shrink: 0; }
/* Insignia con la extensión del archivo (PDF, DOC…) en vez de un ícono
   genérico — mismo tipo de detalle que WhatsApp muestra en sus tarjetas
   de documento. */
.wa-media-doc-ext {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #ff5252;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.wa-vacio { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wa-vacio i { font-size: 32px; color: #4a5a63; }

/* Spinner al abrir un hilo, reutilizando el mismo giro de
   #toast-cargando (ver utilidades.css: @keyframes toast-cargando-spin)
   en vez de definir una animación nueva. */
.wa-spinner-wrap { display: flex; align-items: center; justify-content: center; height: 100%; }
.wa-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: #25d366;
  border-radius: 50%;
  animation: toast-cargando-spin 0.7s linear infinite;
}

/* Skeleton de la lista mientras se pide la primera tanda de
   conversaciones — evita el parpadeo en blanco al abrir el panel. */
@keyframes wa-skeleton-pulso { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } }
.wa-skeleton-fila { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.wa-skeleton-avatar, .wa-skeleton-linea { background: #253138; border-radius: 6px; animation: wa-skeleton-pulso 1.1s ease-in-out infinite; }
.wa-skeleton-avatar { width: 44px; height: 44px; min-width: 44px; border-radius: 50%; }
.wa-skeleton-info { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.wa-skeleton-linea { height: 10px; }
.wa-skeleton-linea.wa-skeleton-corta { width: 55%; }

/* ── Arrastrar y soltar una imagen sobre el hilo (ver ondragover/ondrop
   en whatsapp-inbox.js) — overlay que confirma dónde soltar, oculto
   hasta que el navegador detecta que se está arrastrando algo encima. ── */
.wa-drop-overlay {
  display: none;
  position: absolute;
  inset: 8px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-direction: column;
  background: rgba(0, 168, 132, 0.16);
  border: 2px dashed #00a884;
  border-radius: 10px;
  color: #e9edef;
  font-size: 13.5px;
  font-weight: 600;
  pointer-events: none;
  z-index: 5;
}
.wa-drop-overlay i { font-size: 28px; color: #00a884; }
.wa-chat-fondo.wa-arrastrando .wa-drop-overlay { display: flex; }

/* ── Botón flotante "ir al final", como la flechita hacia abajo de
   WhatsApp cuando estás leyendo mensajes viejos. ── */
.wa-btn-scroll-abajo {
  position: absolute;
  right: 22px;
  bottom: 76px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #202c33;
  color: #e9edef;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  transition: background 0.15s var(--ease-apple, ease);
}
.wa-btn-scroll-abajo:hover { background: #2a3942; }
.wa-btn-scroll-abajo.oculto { display: none; }
.wa-btn-scroll-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9px;
  background: #25d366;
  color: #0b141a;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wa-btn-scroll-badge.oculto { display: none; }

/* ── Vista previa del archivo adjuntado antes de enviarlo. ── */
.wa-adjunto-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 10px;
  padding: 6px 10px;
  background: #202c33;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.wa-adjunto-chip img { width: 32px; height: 32px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.wa-adjunto-chip i { font-size: 20px; color: #8696a0; flex-shrink: 0; }
.wa-adjunto-chip span { flex: 1; min-width: 0; font-size: 12.5px; color: #e9edef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-adjunto-chip button { border: none; background: transparent; color: #8696a0; cursor: pointer; display: flex; padding: 2px; }
.wa-adjunto-chip button:hover { color: #ff5252; }

/* ── Emoji picker: grilla simple sobre la barra de escritura. ── */
.wa-emoji-picker {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  padding: 8px 10px;
  background: #202c33;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.wa-emoji-picker.oculto { display: none; }
.wa-emoji-picker button {
  border: none;
  background: transparent;
  font-size: 19px;
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s var(--ease-apple, ease);
}
.wa-emoji-picker button:hover { background: rgba(255,255,255,0.08); }

/* ── Botones de ícono (emoji / adjuntar) a la izquierda del campo de
   texto, mismo tamaño/estilo que el botón de enviar pero planos. ── */
.wa-btn-icono-input {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #8696a0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  cursor: pointer;
  transition: background 0.15s var(--ease-apple, ease), color 0.15s var(--ease-apple, ease);
}
.wa-btn-icono-input:hover { background: rgba(255,255,255,0.08); color: #e9edef; }

.wa-burbuja-origen { font-size: 10.5px; font-weight: 700; margin-bottom: 2px; opacity: 0.8; }
.wa-burbuja-origen-bot     { color: #53bdeb; }
.wa-burbuja-origen-humano  { color: #ffd479; }
.wa-burbuja-origen-historico { color: #8696a0; }
.wa-burbuja-texto { white-space: pre-wrap; word-break: break-word; }
.wa-burbuja-hora { font-size: 10.5px; color: rgba(233,237,239,0.6); text-align: right; margin-top: 2px; white-space: nowrap; }

/* ── Barra de escritura: input tipo píldora + botón circular verde,
   igual que WhatsApp — distinto del input cuadrado que usa el resto
   de FixHub, a propósito. ── */
.wa-input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #202c33;
  flex-shrink: 0;
}
.wa-input-texto {
  flex: 1;
  min-height: 40px;
  max-height: 120px;
  padding: 10px 16px;
  border-radius: 21px;
  border: none;
  background: #2a3942;
  color: #e9edef;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.3;
  resize: none;
  overflow-y: auto;
  outline: none;
}
.wa-input-texto::placeholder { color: #8696a0; }
.wa-btn-enviar, .wa-btn-mic {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  border: none;
  background: #00a884;
  color: #0b141a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s var(--ease-apple, ease);
}
.wa-btn-enviar:hover, .wa-btn-mic:hover { background: #06cf9c; }
.wa-btn-enviar:disabled { opacity: 0.5; cursor: not-allowed; }
.wa-btn-mic.wa-grabando { background: #ff5252; color: #fff; }

.wa-vacio {
  padding: 40px 20px;
  text-align: center;
  color: #8696a0;
  font-size: 13.5px;
}
.wa-vacio-limpiar {
  margin-top: 4px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: #25d366;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 15px;
  cursor: pointer;
  transition: background 0.15s var(--ease-apple, ease);
}
.wa-vacio-limpiar:hover { background: rgba(37, 211, 102, 0.12); }

/* ── Chips de filtro sobre la lista ("Todos" / "Esperando respuesta"),
   como los que WhatsApp Web pone arriba de los chats. ── */
.wa-filtros-wrap {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  background: #202c33;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.wa-filtro-chip {
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: #8696a0;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s var(--ease-apple, ease), color 0.15s var(--ease-apple, ease), border-color 0.15s var(--ease-apple, ease);
}
.wa-filtro-chip:hover { border-color: rgba(255,255,255,0.3); color: #e9edef; }
.wa-filtro-chip.wa-filtro-activo { background: #00a884; border-color: #00a884; color: #052e26; }

/* Flash breve en la fila de la lista cuando le llega un mensaje nuevo
   por el auto-refresco — el mismo tipo de parpadeo sutil que hace
   WhatsApp Web al reordenar un chat hacia arriba. */
@keyframes wa-flash-nuevo { 0% { background: rgba(37, 211, 102, 0.28); } 100% { background: transparent; } }
.wa-conv-item.wa-flash { animation: wa-flash-nuevo 1.2s ease-out; }

/* ── Visor de fotos a pantalla completa (clic en una imagen del hilo),
   en vez de abrirla en una pestaña nueva del navegador. ── */
.wa-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.88);
  animation: wa-fila-aparece 0.15s ease both;
}
.wa-lightbox.oculto { display: none; }
.wa-lightbox img { max-width: 90vw; max-height: 85vh; border-radius: 4px; box-shadow: 0 8px 40px rgba(0,0,0,0.6); }
.wa-lightbox-barra {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 14px 18px;
}
.wa-lightbox-barra a, .wa-lightbox-barra button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s var(--ease-apple, ease);
}
.wa-lightbox-barra a:hover, .wa-lightbox-barra button:hover { background: rgba(255,255,255,0.22); }

/* ── Foto/video que fallaron el envío: colita roja con "!" en vez del
   doble check, y se puede tocar para reintentar — no se queda pegada
   como "enviando…" para siempre. ── */
.wa-optimista.wa-fallido .wa-burbuja-check { color: #ff5252; cursor: pointer; }
.wa-optimista.wa-fallido .wa-burbuja { opacity: 0.85; }

/* Sticker: sin fondo de burbuja ni sombra — como en WhatsApp real, que
   muestra el PNG transparente "flotando" en vez de meterlo en un
   globo de texto. */
.wa-burbuja.wa-burbuja-sticker { background: transparent; box-shadow: none; padding: 0; }
.wa-burbuja.wa-burbuja-sticker::before { display: none; }
.wa-burbuja.wa-burbuja-sticker .wa-media-img { max-width: 130px; max-height: 130px; object-fit: contain; cursor: default; }
.wa-burbuja.wa-burbuja-sticker .wa-burbuja-hora { background: rgba(0,0,0,0.45); }

.wa-media-img { opacity: 0; transition: opacity 0.25s var(--ease-apple, ease); }
.wa-media-img.wa-media-cargada { opacity: 1; }

/* Spinner adentro del botón de enviar mientras el mensaje va en
   camino, en vez de solo apagarlo — mismo giro reciclado de
   utilidades.css que ya usa .wa-spinner. */
.wa-btn-enviar.wa-enviando { pointer-events: none; }
.wa-btn-enviar.wa-enviando i { display: none; }
.wa-btn-enviar.wa-enviando::after {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid rgba(11,20,26,0.35);
  border-top-color: #0b141a;
  border-radius: 50%;
  animation: toast-cargando-spin 0.6s linear infinite;
}
.wa-btn-enviar.oculto { display: none; }

/* ── Doble check azul cuando el cliente ya leyó el mensaje (recibo
   real de Meta, ver whatsapp-webhook/index.ts) — el resto de los
   estados (enviado/entregado) se quedan en gris, igual que WhatsApp. ── */
.wa-check-leido { color: #53bdeb; }
.wa-check-fallido { color: #ff5252; }

/* ── Botón "responder" que aparece al pasar el mouse sobre un mensaje
   — igual que el ícono de flechita que WhatsApp muestra al costado de
   la burbuja al hacer hover. ── */
.wa-btn-responder {
  align-self: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.08);
  color: #8696a0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s var(--ease-apple, ease), background 0.12s var(--ease-apple, ease);
  margin: 0 4px;
}
.wa-fila:hover .wa-btn-responder { opacity: 1; }
.wa-btn-responder:hover { background: rgba(255,255,255,0.18); color: #e9edef; }

/* Burbuja citada dentro de un mensaje que respondió a otro puntual. */
.wa-burbuja-cita {
  margin-bottom: 4px;
  padding: 5px 8px;
  border-left: 3px solid #25d366;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  font-size: 12px;
  color: #b9c2c7;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 3.6em;
  overflow: hidden;
}

/* Vista previa de "respondiendo a…" arriba de la barra de escritura,
   con botón para cancelar — se cierra sola al mandar el mensaje. */
.wa-respuesta-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 10px;
  padding: 6px 10px;
  background: #202c33;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid #25d366;
}
.wa-respuesta-preview-texto { flex: 1; min-width: 0; font-size: 12.5px; color: #d1d7db; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-respuesta-preview button { border: none; background: transparent; color: #8696a0; cursor: pointer; display: flex; padding: 2px; }
.wa-respuesta-preview button:hover { color: #ff5252; }

/* ── Grabar nota de voz: el botón de enviar se reemplaza por un
   micrófono cuando el campo está vacío (como WhatsApp) — al grabar, el
   input normal se esconde y aparece el punto rojo pulsando + el
   cronómetro + cancelar. ── */
.wa-btn-mic.oculto { display: none; }
@keyframes wa-punto-grabando { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.wa-grabando-bar { display: none; align-items: center; gap: 10px; flex: 1; padding: 0 6px; }
.wa-input-bar.wa-grabando-activo .wa-grabando-bar { display: flex; }
/* El mic NO se esconde acá — durante la grabación cambia a botón de
   enviar (ver _actualizarUiGrabacionWhatsapp), y es la única forma de
   terminar y mandar la nota de voz. Sin esto no había cómo parar. */
.wa-input-bar.wa-grabando-activo > .wa-input-texto,
.wa-input-bar.wa-grabando-activo > .wa-btn-icono-input { display: none; }
.wa-grabando-punto { width: 10px; height: 10px; border-radius: 50%; background: #ff5252; animation: wa-punto-grabando 1s ease-in-out infinite; flex-shrink: 0; }
.wa-grabando-timer { color: #e9edef; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.wa-grabando-hint { flex: 1; color: #8696a0; font-size: 12.5px; }
.wa-btn-cancelar-grabacion {
  width: 34px; height: 34px; border-radius: 50%; border: none; background: transparent; color: #8696a0;
  display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer;
}
.wa-btn-cancelar-grabacion:hover { background: rgba(255,82,82,0.14); color: #ff5252; }
/* Sin esto el botón de cancelar (tacho) se veía SIEMPRE, incluso sin
   estar grabando — la "X que no servía para nada" que se reportó. */
.wa-btn-cancelar-grabacion.oculto { display: none; }

/* ── Buscador dentro del hilo abierto (ver botón de lupa en el header),
   con contador de coincidencias y navegación arriba/abajo. ── */
.wa-buscar-hilo-barra {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #202c33;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.wa-buscar-hilo-barra.activa { display: flex; }
.wa-buscar-hilo-barra i { color: #8696a0; font-size: 15px; flex-shrink: 0; }
.wa-buscar-hilo-input { flex: 1; border: none; background: transparent; color: #e9edef; font-size: 13.5px; outline: none; }
.wa-buscar-hilo-input::placeholder { color: #8696a0; }
.wa-buscar-hilo-contador { font-size: 11.5px; color: #8696a0; white-space: nowrap; }
.wa-buscar-hilo-barra button { width: 26px; height: 26px; border-radius: 50%; border: none; background: transparent; color: #8696a0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.wa-buscar-hilo-barra button:hover:not(:disabled) { background: rgba(255,255,255,0.1); color: #e9edef; }
.wa-buscar-hilo-barra button:disabled { opacity: 0.35; cursor: default; }
.wa-burbuja.wa-coincidencia-actual { outline: 2px solid #25d366; outline-offset: 1px; }

/* Burbuja citada clicable: salta al mensaje original (ver
   _saltarAMensajeWhatsapp). */
.wa-burbuja-cita[onclick] { cursor: pointer; }
.wa-burbuja-cita[onclick]:hover { background: rgba(255,255,255,0.12); }

/* ── Panel "Info del contacto" (clic en el nombre del header) — mismo
   patrón de reemplazar el cuerpo del dropdown que usan la lista y el
   hilo, con su propia sección de multimedia compartida. ── */
.wa-info-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 16px; }
.wa-info-cabecera {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 28px 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wa-info-avatar-grande { width: 88px; height: 88px; font-size: 32px; margin-bottom: 8px; }
.wa-info-nombre { font-size: 17px; font-weight: 600; color: #e9edef; text-align: center; }
.wa-info-numero-fila { display: flex; align-items: center; gap: 6px; color: #8696a0; font-size: 13px; }
.wa-info-numero-fila button { border: none; background: transparent; color: #8696a0; cursor: pointer; display: flex; padding: 2px; }
.wa-info-numero-fila button:hover { color: #25d366; }
.wa-info-stat { margin-top: 6px; font-size: 12px; color: #8696a0; }
.wa-info-seccion-titulo { padding: 14px 16px 8px; font-size: 12.5px; font-weight: 700; color: #8696a0; text-transform: uppercase; letter-spacing: 0.3px; }
.wa-info-vacio { padding: 0 16px; font-size: 12.5px; color: #6b7880; }
.wa-info-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 0 3px; }
.wa-info-media-item { position: relative; aspect-ratio: 1; overflow: hidden; cursor: pointer; background: #202c33; }
.wa-info-media-item img, .wa-info-media-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.wa-info-media-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 22px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.6); pointer-events: none; }
.wa-info-lista-docs { display: flex; flex-direction: column; gap: 6px; padding: 0 16px; }

/* Ícono de "fijar en humano" (no volver sola al bot) cuando está
   activo — ver _toggleAutoBotWhatsapp en whatsapp-inbox.js. */
.wa-chat-header .btn-icono-plano.wa-icono-activo { color: #25d366; }

/* ── Modal de cámara (getUserMedia), como el que abre WhatsApp Web al
   tocar el ícono de cámara — reemplaza el <input capture>, que en
   desktop no abre ninguna cámara real. ── */
.wa-camara-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: #000;
  align-items: center;
  justify-content: center;
}
.wa-camara-modal.visible { display: flex; }
.wa-camara-modal video,
.wa-camara-modal canvas {
  max-width: 100vw;
  max-height: 100vh;
  width: auto;
  height: auto;
}
.wa-camara-modal video.oculto,
.wa-camara-modal canvas.oculto,
.wa-camara-modal .wa-camara-controles.oculto {
  display: none;
}
.wa-camara-cerrar {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}
.wa-camara-cerrar:hover { background: rgba(255,255,255,0.22); }
.wa-camara-controles {
  position: absolute;
  bottom: 28px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.wa-camara-disparo {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.wa-camara-disparo::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.1s var(--ease-apple, ease);
}
.wa-camara-disparo:active::before { transform: scale(0.85); }
.wa-camara-btn-secundario, .wa-camara-btn-enviar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 24px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.wa-camara-btn-secundario { background: rgba(255,255,255,0.14); color: #fff; }
.wa-camara-btn-secundario:hover { background: rgba(255,255,255,0.24); }
.wa-camara-btn-enviar { background: #00a884; color: #052e26; }
.wa-camara-btn-enviar:hover { background: #06cf9c; }

/* ── Nombre editable en el panel de info del contacto — ver
   _editarNombreContactoWhatsapp en whatsapp-inbox.js. ── */
.wa-info-nombre-fila { display: flex; align-items: center; gap: 6px; }
.wa-info-nombre-fila button { border: none; background: transparent; color: #8696a0; cursor: pointer; display: flex; padding: 2px; opacity: 0; transition: opacity 0.12s var(--ease-apple, ease); }
.wa-info-cabecera:hover .wa-info-nombre-fila button { opacity: 1; }
.wa-info-nombre-fila button:hover { color: #25d366; }
.wa-info-nombre-input {
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  background: #2a3942;
  border: none;
  border-radius: 6px;
  color: #e9edef;
  padding: 4px 10px;
  outline: none;
  max-width: 220px;
}

/* ── Importar respaldo de WhatsApp (chat exportado del teléfono) —
   sección al fondo del panel de info del contacto. ── */
.wa-info-importar { padding: 0 16px 8px; }
.wa-info-importar p { font-size: 12px; color: #8696a0; line-height: 1.5; margin-bottom: 10px; }
.wa-info-btn-importar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px dashed rgba(255,255,255,0.2);
  background: transparent;
  color: #d1d7db;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s var(--ease-apple, ease), border-color 0.15s var(--ease-apple, ease);
}
.wa-info-btn-importar:hover { background: rgba(37, 211, 102, 0.08); border-color: #25d366; color: #25d366; }
.wa-info-btn-importar.wa-info-btn-borrar { margin-top: 8px; }
.wa-info-btn-importar.wa-info-btn-borrar:hover { background: rgba(255,82,82,0.08); border-color: #ff5252; color: #ff5252; }

/* ── Selector de "¿cuál nombre eres tú?" al importar un historial —
   necesario porque WhatsApp no marca en el export quién es el dueño
   del teléfono. ── */
.wa-selector-modal {
  position: fixed;
  inset: 0;
  z-index: 2200;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wa-selector-caja {
  background: #202c33;
  border-radius: 12px;
  padding: 20px;
  width: 320px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.wa-selector-titulo { font-size: 14px; font-weight: 600; color: #e9edef; margin-bottom: 6px; text-align: center; }
.wa-selector-opcion {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: #e9edef;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.15s var(--ease-apple, ease);
}
.wa-selector-opcion:hover { background: rgba(37, 211, 102, 0.12); border-color: #25d366; }
.wa-selector-opcion.wa-selector-opcion-peligro { border-color: rgba(255,82,82,0.3); color: #ff5252; }
.wa-selector-opcion.wa-selector-opcion-peligro:hover { background: rgba(255,82,82,0.12); border-color: #ff5252; }
.wa-selector-cancelar { margin-top: 4px; padding: 8px; border: none; background: transparent; color: #8696a0; font-size: 12.5px; cursor: pointer; }
.wa-selector-cancelar:hover { color: #ff5252; }

/* Burbuja de "Se eliminó este mensaje" — sin acciones, más angosta y
   apagada que una burbuja normal, igual que WhatsApp real. */
.wa-burbuja-eliminada {
  display: flex;
  align-items: center;
  gap: 6px;
  font-style: italic;
  color: #8696a0;
  font-size: 12.5px;
  opacity: 0.85;
}
.wa-burbuja-eliminada i { font-size: 14px; }
.wa-selector-caja input, .wa-selector-caja textarea {
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: #2a3942;
  color: #e9edef;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  resize: none;
}
.wa-selector-caja input:focus, .wa-selector-caja textarea:focus { border-color: #25d366; }
.wa-nueva-conv-nota { font-size: 11.5px; color: #8696a0; line-height: 1.5; margin: 2px 0; }

/* ── Badge de mensajes sin leer + iconos de fijada/silenciada en la
   lista, y menú "⋮" de cada conversación. ── */
.wa-conv-badge-no-leidos {
  background: #25d366;
  color: #052e26;
  font-size: 10.5px;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.wa-conv-icono-fijada, .wa-conv-icono-silenciada { font-size: 12px; color: #8696a0; flex-shrink: 0; }
.wa-conv-icono-bloqueado { font-size: 12px; color: #ff5252; flex-shrink: 0; }
.wa-conv-menu-peligro { color: #ff5252 !important; }
.wa-conv-menu-peligro:hover { background: rgba(255,82,82,0.1) !important; }

/* ── Barra de escritura bloqueada — reemplaza el input normal cuando
   el contacto está bloqueado, para no poder contestarle por accidente
   sin desbloquear antes a propósito. ── */
.wa-input-bar-bloqueado {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: #ff8a80;
  font-size: 12.5px;
}
.wa-input-bar-bloqueado i { font-size: 18px; flex-shrink: 0; }
.wa-input-bar-bloqueado span { flex: 1; }
.wa-input-bar-bloqueado button { flex-shrink: 0; }
.wa-conv-etiquetas { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.wa-etiqueta-chip { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 8px; white-space: nowrap; }
.wa-etiqueta-chip-quitable { display: inline-flex; align-items: center; gap: 4px; padding-right: 4px; }
.wa-etiqueta-chip-quitable button { border: none; background: transparent; color: inherit; opacity: 0.7; cursor: pointer; display: flex; padding: 0; }
.wa-etiqueta-chip-quitable button:hover { opacity: 1; }
.wa-etiquetas-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }

.wa-conv-menu-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #b0bbc2;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* Siempre visible (antes 0, solo aparecía al hacer hover en la fila —
     invisible del todo en celular, sin hover) — más marcado en hover.
     También más grande y más claro que antes (heredaba 13px gris oscuro
     de .wa-conv-item, casi imperceptible). */
  opacity: 0.75;
  transition: opacity 0.12s var(--ease-apple, ease), background 0.12s var(--ease-apple, ease);
}
.wa-conv-item:hover .wa-conv-menu-btn { opacity: 1; }
.wa-conv-menu-btn:hover { background: rgba(255,255,255,0.1); color: #e9edef; opacity: 1; }
.wa-conv-menu {
  position: fixed;
  z-index: 2300;
  background: #202c33;
  border-radius: 8px;
  padding: 6px;
  min-width: 190px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
}
.wa-conv-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: none;
  background: transparent;
  color: #e9edef;
  font-size: 13px;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
}
.wa-conv-menu button:hover { background: rgba(255,255,255,0.08); }

/* ── Respuestas rápidas: lista flotante sobre la barra de escritura
   (autocompletar "/atajo") + modal de administración. ── */
.wa-respuestas-rapidas-lista {
  display: flex;
  flex-direction: column;
  max-height: 180px;
  overflow-y: auto;
  background: #202c33;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.wa-respuestas-rapidas-lista.oculto { display: none; }
.wa-respuestas-rapidas-lista button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.wa-respuestas-rapidas-lista button:hover { background: rgba(255,255,255,0.06); }
.wa-respuesta-rapida-atajo { color: #25d366; font-weight: 700; font-size: 12.5px; flex-shrink: 0; }
.wa-respuesta-rapida-texto { color: #d1d7db; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-respuestas-admin-caja { width: 380px; }
.wa-respuestas-admin-lista { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; margin-bottom: 4px; }
.wa-respuesta-admin-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: #2a3942;
  border-radius: 8px;
}
.wa-respuesta-admin-item > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wa-respuesta-admin-texto { color: #d1d7db; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-respuesta-admin-item button { border: none; background: transparent; color: #8696a0; cursor: pointer; flex-shrink: 0; display: flex; }
.wa-respuesta-admin-item button:hover { color: #ff5252; }

/* ── Mensajes destacados (⭐) — ícono flotando en la esquina de la
   burbuja + lista en el panel de info del contacto. ── */
.wa-burbuja-destacado-icono { position: absolute; top: -6px; color: #ffab40; font-size: 12px; }
.wa-burbuja-out .wa-burbuja-destacado-icono { right: -4px; }
.wa-burbuja-in .wa-burbuja-destacado-icono { left: -4px; }
.wa-info-destacados-lista { display: flex; flex-direction: column; gap: 2px; padding: 0 16px; }
.wa-info-destacado-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 12.5px;
  color: #d1d7db;
}
.wa-info-destacado-item i { color: #ffab40; flex-shrink: 0; }
.wa-info-destacado-item span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-info-destacado-hora { color: #8696a0; font-size: 11px; flex-shrink: 0; }