:root {
  --navy: #2B4A8C;
  --medium-blue: #3D5FA0;
  --purple: #7B5BB6;
  --bg: #f4f6fb;
  --text: #1c2536;
  --border: #dbe1ee;
}

* { box-sizing: border-box; }

/* BUG real reportado 2026-09-14/15 ("desfase de scroll horizontal al abrir
   o recargar una conversacion"): el fix anterior solo ponia overflow-x:hidden
   en contenedores internos (.cuerpo, .panel-conversacion, etc, ver mas abajo)
   y reseteaba su scrollLeft al abrir un hilo por click - pero eso no cubre
   un reload/relanzamiento de la PWA con una conversacion ya activa, donde el
   primer paint (antes de que JS aplique las clases mostrando-conversacion/
   panel-conversacion-visible) puede desbordar brevemente y dejar el propio
   `html`/`body` (no un contenedor interno) con scrollLeft > 0 de forma
   persistente. html/body nunca tienen razon legitima de scrollear horizontal
   en este layout - se bloquea aqui como cinturon de seguridad de nivel mas
   alto, ademas del reset explicito en abrirHilo()/DOMContentLoaded (app.js). */
html {
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.pantalla-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tarjeta-login {
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 8px 30px rgba(43, 74, 140, 0.12);
}

.tarjeta-login h1 {
  color: var(--navy);
  font-size: 1.4rem;
  margin: 0 0 4px;
}

.tarjeta-login p {
  color: #64708a;
  font-size: 0.9rem;
  margin: 0 0 24px;
}

.campo {
  margin-bottom: 16px;
}

.campo label {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 6px;
  color: #3a4560;
}

.campo input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 1rem;
}

.campo input:focus {
  outline: none;
  border-color: var(--medium-blue);
}

/* Mostrar/ocultar contraseña en login (2026-08-07: el usuario quedo
   bloqueado de su cuenta por un password que no podia verificar). */
.campo-password {
  position: relative;
}
.campo-password input {
  padding-right: 40px;
}
.boton-mostrar-password {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: none;
  background: none;
  color: #8a93ab;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.boton-mostrar-password:hover { background: #f0f3fa; color: var(--medium-blue); }
.boton-mostrar-password.mostrando { color: var(--medium-blue); }

.boton-primario {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.boton-primario:hover { background: var(--medium-blue); }
.boton-primario:disabled { opacity: 0.6; cursor: default; }

.error-login {
  color: #b3261e;
  font-size: 0.85rem;
  margin-top: 12px;
  min-height: 1.2em;
}

/* Punto 6 del diseno acordado (rediseno 2026-09-15) - feedback de la
   busqueda en vivo por RFC contra ContPAQi, ver dc-rfc en app.js. */
.dc-rfc-estado { display: block; font-size: 0.8rem; margin-top: 4px; color: #64708a; }
.dc-rfc-encontrado { color: #1c7c3f; }
.dc-rfc-no-encontrado { color: #8a5a00; }

.barra-superior {
  background: var(--navy);
  color: #fff;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.barra-superior h1 { font-size: 1.1rem; margin: 0; }

.contenedor-vacio {
  padding: 40px 20px;
  text-align: center;
  color: #64708a;
}

/* ============================================================
   Inbox (Fase 4) - layout: en movil una sola pantalla a la vez
   (lista O conversacion), en pantallas anchas ambas lado a lado.
   ============================================================ */

.app-shell {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

.acciones-header { display: flex; gap: 8px; }

.boton-icono {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.boton-icono:hover { background: rgba(255, 255, 255, 0.28); }

/* Fase 5, pendiente desde el cierre de Fase 4: alertas de reconexion-
   abandonada de WhatsApp visibles en NivoChat (antes solo Telegram). */
.banner-alertas { display: flex; flex-direction: column; }
.alerta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: #fbe6e5;
  color: #7a1c15;
  font-size: 0.85rem;
  border-bottom: 1px solid #f3c9c6;
}
.alerta-texto { flex: 1; }
.alerta-resolver {
  flex-shrink: 0;
  border: 1px solid #b3261e;
  background: #fff;
  color: #b3261e;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 0.8rem;
  cursor: pointer;
}
.alerta-resolver:hover { background: #b3261e; color: #fff; }
.alerta-resolver:disabled { opacity: 0.5; cursor: default; }

.cuerpo {
  flex: 1;
  display: flex;
  min-height: 0;
  /* BUG real reportado 2026-09-14: la pantalla completa quedaba desfasada
     horizontalmente al abrir cualquier chat (encabezado y mensajes cortados
     por la izquierda, no se corregia deslizando). No se aislo la causa
     exacta con certeza (ningun contenido deberia forzar mas ancho que el
     viewport - .burbuja-texto ya tiene word-break: break-word), pero
     ninguno de estos contenedores tiene una razon legitima para scrollear
     horizontal (solo .etiquetas-barra si, a proposito) - se bloquea aqui y
     en los contenedores hijos de abajo como cinturon de seguridad, ademas
     del reset de scrollLeft en abrirHilo()/app.js. */
  overflow-x: hidden;
}

.panel-lista {
  width: 100%;
  border-right: 1px solid var(--border);
  background: #fff;
  flex-shrink: 0;
  /* display:flex agregado 2026-08-11 para el buscador de contactos fijo
     arriba (buscador-hilos) - antes solo tenia overflow-y en el panel
     completo, ahora solo la lista de hilos hace scroll. */
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Buscador de contactos (Home) - agregado 2026-08-11 a peticion del usuario. */
.buscador-hilos {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: #8a93ab;
}
.buscador-hilos svg { flex-shrink: 0; }
.buscador-hilos input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px; /* iOS zoom-on-focus, ver nota en .compose textarea */
  color: var(--text);
  background: none;
  min-width: 0;
}
.buscar-limpiar {
  flex-shrink: 0;
  border: none;
  background: #eef0f4;
  color: #64708a;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.buscar-limpiar:hover { background: #dbe1ee; }

/* Filtro "No Califico" / inactivos +5 dias habiles - agregado 2026-08-13
   a peticion del usuario (chat de solo seguimiento, ocultos por defecto). */
.filtro-ocultos {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 10px;
  border-bottom: 1px solid var(--border);
  color: #8a93ab;
  font-size: 0.78rem;
  cursor: pointer;
}
.filtro-ocultos input { flex-shrink: 0; cursor: pointer; }

/* Filtro positivo por etiqueta (Calificado/Cliente/...) - agregado
   2026-08-19 a peticion del usuario, separado del checkbox de arriba
   porque uno oculta/muestra y este busca directo una etiqueta especifica. */
.filtro-estado {
  flex-shrink: 0;
  width: calc(100% - 28px);
  margin: 0 14px 10px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-size: 0.82rem;
  cursor: pointer;
}

.lista-hilos { flex: 1; overflow-y: auto; min-height: 0; }

.lista-vacia { padding: 24px 16px; color: #8a93ab; font-size: 0.9rem; text-align: center; }

.item-hilo {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  cursor: pointer;
  font: inherit;
}
.item-hilo:hover { background: #f0f3fa; }
.item-hilo.hilo-activo { background: #e7ecf9; }
.item-hilo.hilo-atendida { opacity: 0.6; }

/* Foto de perfil (2026-09-22) - circulo 40px, con inicial de respaldo
   cuando no hay foto descargada todavia (ver src/fotoPerfil.js). */
.item-hilo-fila { display: flex; gap: 10px; align-items: flex-start; }
.item-hilo-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: #d8dde8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-hilo-avatar img { width: 100%; height: 100%; object-fit: cover; }
.item-hilo-avatar-inicial { font-weight: 600; color: #5b6478; font-size: 1rem; }
.item-hilo-contenido { flex: 1; min-width: 0; }

.item-hilo-linea1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.item-hilo-nombre { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-hilo-fecha { font-size: 0.75rem; color: #8a93ab; flex-shrink: 0; }
.item-hilo-preview {
  margin-top: 2px;
  font-size: 0.82rem;
  color: #8a93ab;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-hilo-linea2 { margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; }

.badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  background: #e7ecf9;
  color: var(--navy);
}
.badge-sin_calificar { background: #eaf0fb; color: var(--medium-blue); }
.badge-calificado { background: #e2f3e8; color: #1c7c3f; }
.badge-no_calificado { background: #fbe6e5; color: #b3261e; }
.badge-cliente { background: #f1e8fa; color: var(--purple); }
.badge-atendida { background: #eef0f4; color: #64708a; }
/* Numero de negocio de origen (2026-08-18) - fondo oscuro solido a
   proposito, distinto de los tonos claros de los demas badges, para que
   se distinga de un vistazo que es "de que numero" y no "estado del
   cliente". Solo se muestra para numeros ADICIONALES (ver
   NUMERO_ORIGEN_ETIQUETA en app.js - el numero principal/3333 no lleva
   badge). */
.badge-numero-origen { background: var(--navy); color: #fff; }
/* Ciudad del contacto (2026-08-19) - texto libre, tono neutro consistente
   con badge-atendida, no compite visualmente con las etiquetas de estado. */
.badge-ciudad { background: #eef0f4; color: #475069; }
/* Indicador simple de ficha de envio ya capturada (2026-08-19) - solo el
   emoji, sin texto, para no competir con los demas badges de la fila. */
.badge-ficha-envio { background: #fdf0dc; padding: 2px 6px; }
/* Origen MTY/foraneo (punto 2 del diseno acordado 2026-09-14, derivado
   automatico del LADA, ver src/lada.js) - mismo tono neutro que
   badge-ciudad (informativo, no es un estado que requiera accion), solo
   se muestra cuando es foraneo (ver criterio en app.js). */
.badge-foraneo { background: #eef0f4; color: #475069; }
/* Estancado (punto 3 del diseno acordado 2026-09-14) - tono ambar/rojizo
   suave, distinto del naranja de "Sugerencia lista" (esa es sobre
   nosotros, esta es sobre el prospecto) para no confundirlos de un
   vistazo aunque aparezcan juntos en el mismo hilo. */
.badge-estancado { background: #fbe6e5; color: #b3261e; }
/* Feedback real de uso 2026-08-08: el usuario no se daba cuenta de que
   habia una sugerencia de seguimiento lista hasta entrar al chat - ahora
   se resalta desde la lista (Home). */
.badge-sugerencia-pendiente { background: #fff3d6; color: #8a5a00; }
.item-hilo.hilo-con-sugerencia { background: #fffaf0; border-left: 3px solid #e8a33d; }
.item-hilo.hilo-con-sugerencia.hilo-activo { background: #f5ecda; }
.hilo-sugerencia-punto {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e8a33d;
  margin-right: 6px;
  flex-shrink: 0;
}

/* No leido (punto 8, 2026-09-14) - punto azul (mismo tono que la marca,
   distinto del naranja de sugerencia para no confundirlos) + nombre en
   negritas mas fuerte, mismo patron visual que .hilo-sugerencia-punto. */
.hilo-no-leido-punto {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--medium-blue);
  margin-right: 6px;
  flex-shrink: 0;
}
.item-hilo.hilo-no-leido .item-hilo-nombre { font-weight: 800; color: var(--navy); }
.item-hilo.hilo-no-leido .item-hilo-preview { color: var(--text); }

.panel-conversacion {
  flex: 1;
  display: none;
  flex-direction: column;
  min-height: 0;
  background: #eef1f8;
  overflow-x: hidden; /* ver nota de .cuerpo arriba - bug de scroll horizontal 2026-09-14 */
}
.panel-conversacion.panel-conversacion-visible { display: flex; }

.conversacion-vacia {
  display: none;
  flex: 1;
  align-items: center;
  justify-content: center;
  color: #8a93ab;
  padding: 24px;
  text-align: center;
}

/* Punto 6 del diseno acordado 2026-09-14/15 (cross-sell ContPAQi, Fase 1):
   conversacion-activa paso de columna a fila para que .panel-productos
   pueda vivir como columna hermana de .conversacion-columna (el contenido
   de siempre - header/mensajes/compose) en vez de superponerse encima. */
.conversacion-activa { flex: 1; display: flex; flex-direction: row; min-height: 0; overflow-x: hidden; }
.conversacion-activa.oculto { display: none; }
.conversacion-columna { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; }

.panel-productos {
  flex: 0 0 340px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #fff;
  border-left: 1px solid var(--border);
}
.panel-productos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--navy);
  flex-shrink: 0;
}
.panel-productos-contenido { flex: 1; overflow-y: auto; padding: 12px 14px; }
.panel-productos-factura {
  font-size: 0.82rem;
  color: #64708a;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.panel-productos-linea {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.panel-productos-linea:last-child { border-bottom: none; }
.panel-productos-linea-desc { color: var(--text); }
.panel-productos-linea-detalle { color: #8a93ab; font-size: 0.78rem; margin-top: 2px; }

/* Movil: el panel toma toda la pantalla (340px fijo no cabe) - se oculta
   la columna de conversacion mientras el panel esta abierto (clase
   mostrando-productos puesta/quitada a mano en app.js, mismo patron ya
   usado en el resto de la app en vez de :has() para no depender de
   soporte de navegador). */
@media (max-width: 859px) {
  .conversacion-activa.mostrando-productos .conversacion-columna { display: none; }
  .conversacion-activa.mostrando-productos .panel-productos { flex: 1; }
}

.conversacion-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0; /* ver nota de .cuerpo - bug scroll horizontal 2026-09-14 */
}

.boton-volver {
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--navy);
  padding: 4px 6px;
}

.conversacion-titulo { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.conversacion-titulo strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversacion-titulo span { font-size: 0.78rem; color: #8a93ab; }

/* Ciudad del contacto (2026-08-19, peticion real del usuario) - boton
   discreto en la 3ra linea del encabezado, mismo lugar donde se ve el
   telefono, para saber locales vs foraneos de un vistazo y poder
   editarlo con un clic (mismo patron que boton-renombrar, pero inline
   texto en vez de icono aparte). */
.boton-ciudad {
  align-self: flex-start;
  margin-top: 2px;
  border: none;
  background: none;
  padding: 0;
  font-size: 0.78rem;
  color: #8a93ab;
  cursor: pointer;
  text-decoration: underline dotted;
}
.boton-ciudad:hover { color: var(--medium-blue); }
.boton-ciudad-con-valor { color: var(--medium-blue); text-decoration: none; font-weight: 600; }

/* Factura/Empresa (2026-08-19, peticion real del usuario) - siempre
   visibles junto al nombre (a diferencia de Ciudad, no son un boton -
   se editan desde el mismo popup que el nombre, ver modal-datos-contacto). */
.conv-dato-facturacion { display: block; margin-top: 1px; }

.boton-renombrar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  color: #8a93ab;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.boton-renombrar:hover { background: #f0f3fa; color: var(--medium-blue); }

/* Buscar dentro de la conversacion - agregado 2026-08-11 a peticion del
   usuario, mismo botón redondo que boton-renombrar (clase compartida). */
.barra-buscar-mensajes {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.barra-buscar-mensajes input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 16px; /* iOS zoom-on-focus, ver nota en .compose textarea */
  outline: none;
  min-width: 0;
}
.barra-buscar-mensajes input:focus { border-color: var(--medium-blue); }
.buscar-mensajes-contador {
  flex-shrink: 0;
  font-size: 0.78rem;
  color: #8a93ab;
  min-width: 34px;
  text-align: center;
}
.boton-icono-chico {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: #eef0f4;
  color: #64708a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}
.boton-icono-chico:hover { background: #dbe1ee; }

mark.resaltado-busqueda {
  background: #fff3d6;
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
mark.resaltado-busqueda.resaltado-busqueda-activo {
  background: #f7c948;
}

.chip-atendida {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.78rem;
  cursor: pointer;
  color: var(--text);
}
.chip-atendida-activa { background: var(--navy); color: #fff; border-color: var(--navy); }

.etiquetas-barra {
  display: flex;
  gap: 6px;
  padding: 8px 14px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.chip-etiqueta {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
  color: var(--text);
}
.chip-etiqueta-activa { background: var(--medium-blue); color: #fff; border-color: var(--medium-blue); }

/* Ficha de envio (2026-08-19) - MISMO look que .chip-etiqueta pero clase
   distinta a proposito: .chip-etiqueta tiene un listener delegado por
   querySelectorAll(".chip-etiqueta") en app.js que manda POST /etiqueta
   con btn.dataset.estado - este boton no es una etiqueta de
   Calificado/No Califico/Cliente y no tiene data-estado, compartir la
   clase disparaba ese POST con estado=undefined (bug real reportado por
   el usuario: "estado invalido..." al abrir la ficha). */
.chip-ficha-envio {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
  color: var(--text);
}
.chip-ficha-envio.chip-etiqueta-activa { background: var(--medium-blue); color: #fff; border-color: var(--medium-blue); }

.select-tipo-cliente {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.78rem;
  color: var(--text);
  cursor: pointer;
  max-width: 160px;
}

/* Badges de tipo de cliente (feedback real de uso) - 8 tonos distintos,
   ninguno repite los ya usados por las etiquetas de estado_cliente. */
.badge-tipo-clinica { background: #e0f5f3; color: #0f766e; }
.badge-tipo-veterinario { background: #fdf0dc; color: #b45309; }
.badge-tipo-consultorio { background: #e0f2fe; color: #0369a1; }
.badge-tipo-odontologo { background: #fce7f3; color: #be185d; }
.badge-tipo-subdistribuidor { background: #e8e6fb; color: #4338ca; }
.badge-tipo-maxilofacial { background: #ffe8d9; color: #c2410c; }
.badge-tipo-deposito_dental { background: #d9f7fb; color: #0e7490; }
.badge-tipo-otro { background: #eef0f4; color: #64708a; }

.lista-mensajes {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden; /* ver nota de .cuerpo - bug scroll horizontal 2026-09-14 */
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fila-burbuja { display: flex; }
.burbuja-saliente { justify-content: flex-end; }
.burbuja-entrante { justify-content: flex-start; }

.burbuja {
  max-width: 78%;
  padding: 8px 12px;
  border-radius: 14px;
  position: relative;
  box-shadow: 0 1px 2px rgba(28, 37, 54, 0.08);
}
.burbuja-saliente .burbuja { background: var(--navy); color: #fff; border-bottom-right-radius: 4px; }
.burbuja-entrante .burbuja { background: #fff; color: var(--text); border-bottom-left-radius: 4px; }

.burbuja-texto { white-space: pre-wrap; word-break: break-word; font-size: 0.92rem; }
/* Cita local dentro de la burbuja (responde_a_id) - agregada 2026-09-15. */
.burbuja-cita {
  padding: 4px 8px;
  margin-bottom: 5px;
  border-radius: 6px;
  font-size: 0.8rem;
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-left: 3px solid currentColor;
}
.burbuja-entrante .burbuja-cita { background: rgba(0, 0, 0, 0.05); }
.burbuja-saliente .burbuja-cita { background: rgba(255, 255, 255, 0.14); }
.burbuja-texto a { color: inherit; text-decoration: underline; }
.burbuja-entrante .burbuja-texto a { color: var(--navy, #2B4A8C); }
.burbuja-saliente .burbuja-texto a { color: #9fd8ff; }

/* Tarjeta de preview de link (titulo + favicon) dentro de la burbuja,
   estilo WhatsApp - agregada 2026-09-15 a peticion explicita del usuario. */
.preview-burbuja-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  margin-bottom: 6px;
  text-decoration: none;
  color: inherit;
}
.burbuja-entrante .preview-burbuja-link { background: #f1f5f9; }
.burbuja-saliente .preview-burbuja-link { background: rgba(255, 255, 255, 0.14); }
.preview-burbuja-favicon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-burbuja-favicon img { width: 100%; height: 100%; object-fit: contain; }
.preview-burbuja-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.preview-burbuja-titulo {
  font-size: 0.85rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preview-burbuja-host {
  font-size: 0.72rem;
  opacity: 0.75;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.burbuja-adjunto { display: flex; align-items: center; gap: 6px; }
.burbuja-hora { display: block; font-size: 0.68rem; opacity: 0.7; margin-top: 4px; text-align: right; }

/* Preview real de adjuntos (foto/PDF), agregado 2026-08-10 - antes solo se
   mostraba el nombre de archivo como si fuera texto plano. */
.burbuja-adjunto-imagen {
  display: block;
  max-width: 100%;
  max-height: 320px;
  border-radius: 10px;
  object-fit: cover;
}
/* 2026-08-18: pasaron de <a target="_blank"> a <button> (ver comentario en
   app.js, abrirAdjunto) - reset de estilos de boton para que se sigan
   viendo igual que antes. */
.burbuja-adjunto-pdf,
.burbuja-adjunto-imagen-boton {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.burbuja-adjunto-pdf {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  font-size: 0.92rem;
  word-break: break-word;
}
.burbuja-adjunto-pdf:hover { text-decoration: underline; }
.burbuja-adjunto-imagen-boton { display: block; }

.tarjeta-sugerencia {
  align-self: stretch;
  background: #fff8e6;
  border: 1px dashed #d9a441;
  border-radius: 12px;
  padding: 12px;
  margin: 4px 0;
}
.tarjeta-sugerencia-etiqueta { font-size: 0.72rem; font-weight: 700; color: #a0701a; text-transform: uppercase; margin-bottom: 6px; }
.tarjeta-sugerencia-texto { white-space: pre-wrap; font-size: 0.92rem; margin-bottom: 8px; }
.tarjeta-sugerencia-editor {
  width: 100%;
  min-height: 70px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  font: inherit;
  margin-bottom: 8px;
  resize: vertical;
}
.tarjeta-sugerencia-acciones { display: flex; gap: 6px; flex-wrap: wrap; }

.boton-chico { padding: 6px 12px; font-size: 0.82rem; width: auto; border-radius: 8px; }
.boton-secundario {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  font-weight: 600;
}
.boton-secundario:hover { background: #f0f3fa; }
.boton-descartar { color: #b3261e; border-color: #f0c6c3; }

.compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 14px;
  background: #fff;
  border-top: 1px solid var(--border);
}

/* Botones "responder"/"editar"/"eliminar" de cada burbuja de texto -
   agregado 2026-09-15, ampliado 2026-09-21 con editar/eliminar. Agrupados
   en .burbuja-acciones, hermano de .burbuja (no dentro) para no
   sobreponerse al texto ni a la hora - ver renderizarMensaje() en app.js
   para el orden en el DOM segun entrante/saliente. */
.burbuja-acciones { display: flex; flex-direction: column; gap: 2px; align-self: center; flex-shrink: 0; }
.burbuja-responder, .burbuja-editar, .burbuja-eliminar {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted, #6b7a90);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  cursor: pointer;
  padding: 0;
}
.burbuja-responder:hover, .burbuja-responder:active,
.burbuja-editar:hover, .burbuja-editar:active { opacity: 1; background: rgba(43, 74, 140, 0.08); }
.burbuja-eliminar:hover, .burbuja-eliminar:active { opacity: 1; background: rgba(179, 38, 30, 0.1); color: #b3261e; }

/* Mensaje eliminado (2026-09-21) - placeholder atenuado, igual criterio
   visual que WhatsApp real. */
.burbuja-eliminado { font-style: italic; opacity: 0.65; }

/* Nota de voz (2026-09-21) - <audio> nativo, ancho completo de la burbuja. */
.burbuja-audio { display: block; max-width: 240px; height: 36px; }

/* Franja de cita sobre el compose (responder a un mensaje), igual patron
   visual que WhatsApp: barra a la izquierda + autor/texto + boton cerrar. */
.cita-compose {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #f4f6fb;
  border-top: 1px solid var(--border);
  border-left: 3px solid var(--navy);
}
.cita-compose-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.cita-compose-autor { font-size: 0.78rem; font-weight: 700; color: var(--navy); }
.cita-compose-texto {
  font-size: 0.82rem;
  color: var(--text-muted, #6b7a90);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cita-compose-cancelar {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted, #6b7a90);
  font-size: 0.95rem;
  cursor: pointer;
}
.cita-compose-cancelar:hover { background: rgba(0, 0, 0, 0.06); }
.boton-adjuntar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #f4f6fb;
  color: var(--medium-blue);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.boton-adjuntar:hover { background: #e7ecf9; }
.compose textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  font: inherit;
  /* BUG real reportado 2026-09-15 ("al contestar y regresarse sale corrido,
     hay que hacer zoom para centrar"): iOS Safari hace zoom automatico al
     enfocar CUALQUIER input/textarea con font-size menor a 16px (limite
     fijo de Apple, pensado para legibilidad) y no siempre regresa el zoom
     solo al perder el foco o cambiar de pantalla - deja la vista desfasada
     hasta que el usuario hace pinch manual. 16px (1rem) es el minimo que
     evita el zoom por completo; aplicado aqui y en todos los demas
     inputs/textareas/selects que el usuario puede tocar (buscador de
     hilos, buscador de mensajes, filtro de etiqueta, tipo de cliente,
     textarea de respuestas rapidas - ver el resto de este archivo). */
  font-size: 16px;
  /* Feedback real de uso 2026-08-08: "wrap text como la app de Notas" -
     crece con app.js (autoAjustarAlturaCompose, evento "input") hasta este
     tope, de ahi en adelante hace scroll interno en vez de seguir creciendo. */
  min-height: 38px;
  max-height: 120px;
  overflow-y: auto;
  line-height: 1.35;
}
.boton-enviar { width: auto; padding: 9px 16px; }

.adjunto-pendiente {
  padding: 6px 14px 10px;
  font-size: 0.82rem;
  color: #64708a;
  background: #fff;
}

/* Preview de link en el compose (aclaracion del usuario 2026-09-15,
   "favicon como en WhatsApp") - tarjeta chica arriba del compose, antes de
   mandar el mensaje, igual que hace WhatsApp Business nativo. */
.preview-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 14px;
  padding: 8px 10px;
  background: #f4f6fb;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.85rem;
  color: var(--text);
}
.preview-link img { width: 18px; height: 18px; flex-shrink: 0; }
.preview-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Punto 7 del diseno acordado 2026-09-14/15: bandeja de pendientes. */
.pendientes-seccion { margin-bottom: 18px; }
.pendientes-seccion h3 {
  font-size: 0.85rem;
  color: var(--navy);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pendientes-contador { font-weight: 400; color: #64708a; font-size: 0.8rem; }
.pendientes-lista {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.pendiente-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.pendiente-fila:last-child { border-bottom: none; }
.pendiente-fila:hover { background: #f0f3fa; }
.pendiente-fila-titulo { font-size: 0.86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.pendiente-fila-detalle { font-size: 0.78rem; color: #64708a; flex-shrink: 0; text-align: right; }
.pendiente-fila-check { flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; }

/* Acciones en bulk (2026-09-15) - barra entre el titulo de la seccion y la
   lista, con checkbox "seleccionar todo" + boton de accion masiva. */
.pendientes-bulk-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.pendientes-check-todos { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: #64708a; cursor: pointer; }
.pendientes-bulk-barra .boton-secundario { font-size: 0.78rem; padding: 5px 10px; }
.pendientes-bulk-barra .boton-secundario:disabled { opacity: 0.5; cursor: not-allowed; }

/* Punto 1b del diseno acordado 2026-09-14: respuestas rapidas personales. */
.rr-lista {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 16px;
}
.rr-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.rr-item:last-child { border-bottom: none; }
.rr-item-texto {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  border-radius: 8px;
}
.rr-item-texto:hover { background: #f0f3fa; }
.rr-item-texto strong { font-size: 0.88rem; color: var(--navy); }
.rr-item-texto span {
  font-size: 0.8rem;
  color: #64708a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rr-form .campo { margin-bottom: 10px; }
.rr-form textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 16px; /* iOS zoom-on-focus, ver nota en .compose textarea */
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(28, 37, 54, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}
.modal.oculto { display: none; }
.modal-tarjeta {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  width: 100%;
  max-width: 360px;
}
.modal-tarjeta h2 { margin: 0 0 16px; color: var(--navy); font-size: 1.1rem; }
.modal-acciones { display: flex; gap: 8px; margin-top: 8px; }
.modal-acciones button { flex: 1; }

/* Ficha de envio (2026-08-19) - 11 campos no caben comodos en el ancho
   chico de los demas modales (login/password/nuevo prospecto), y con
   scroll interno para que quepa en pantallas de celular sin desbordar
   la pagina completa (el .modal-tarjeta normal no necesitaba esto). */
.modal-tarjeta-ancha {
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
}

/* Visor de adjuntos (2026-08-18) - ver comentario en index.html. Ocupa
   toda la pantalla (mismo .modal base) en vez de la tarjeta chica de los
   otros modales, para ver bien la foto/PDF. */
.modal-visor {
  padding: 0;
  background: rgba(10, 14, 22, 0.92);
}
/* Bug real reportado 2026-08-18: con fondo semitransparente, la X se
   perdia sobre un PDF de fondo blanco (el iframe del PDF cubre toda la
   pantalla, tapando el fondo oscuro del modal detras del boton). Fondo
   solido (no depende de lo que haya detras) + sombra para que resalte
   incluso sobre fondos claros O oscuros. */
.visor-cerrar {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--navy, #1c2536);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}
.visor-imagen {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.visor-pdf {
  width: 100%;
  height: 100%;
  border: none;
}

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #1c2536;
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 0.88rem;
  z-index: 100;
  max-width: 90vw;
  text-align: center;
}
.toast.oculto { display: none; }
.toast-error { background: #b3261e; }

.oculto { display: none !important; }

/* Movil: una pantalla a la vez - ocultar la lista mientras hay una
   conversacion abierta (si no, panel-lista de 100% + panel-conversacion
   compiten por ancho y todo se desborda). Ver .cuerpo.mostrando-conversacion
   en app.js (abrirHilo/cerrarConversacion). */
@media (max-width: 859px) {
  .cuerpo.mostrando-conversacion .panel-lista { display: none; }
}

/* Escritorio: lista y conversacion lado a lado siempre */
@media (min-width: 860px) {
  .panel-lista { width: 340px; }
  .panel-conversacion { display: flex; }
  .conversacion-vacia { display: flex; }
  .boton-volver { display: none; }
}

/* ============================================================
   Punto 5 del diseno acordado 2026-09-14: vista kanban, ALTERNA a la
   lista - nunca las 2 visibles a la vez, en ninguna pantalla (por eso el
   !important - sin esto, el media query de escritorio de arriba
   "gana" y deja panel-conversacion visible encima del kanban). Toma el
   ancho completo porque 4 columnas no caben comodas en los 340px del
   panel-lista de escritorio, ni en el ancho de un celular.
   ============================================================ */
.panel-kanban {
  display: none;
  flex: 1;
  gap: 12px;
  padding: 14px;
  overflow-x: auto;
  background: var(--bg);
  min-height: 0;
}
.cuerpo.mostrando-kanban .panel-kanban { display: flex; }
.cuerpo.mostrando-kanban .panel-lista,
.cuerpo.mostrando-kanban .panel-conversacion { display: none !important; }

.kanban-columna {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--border);
  min-height: 0;
}
.kanban-columna-titulo {
  padding: 12px 14px;
  font-weight: 700;
  color: var(--navy);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.kanban-columna-contador { color: #8a93ab; font-weight: 600; }
.kanban-tarjetas {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.kanban-tarjeta {
  display: block;
  width: 100%;
  text-align: left;
  background: #f8f9fc;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font: inherit;
}
.kanban-tarjeta:hover { background: #eef1f8; }
.kanban-tarjeta-activa { border-color: var(--medium-blue); background: #e7ecf9; }
.kanban-tarjeta-nombre { font-weight: 600; font-size: 0.88rem; color: var(--text); }
.kanban-tarjeta-preview {
  font-size: 0.78rem;
  color: #8a93ab;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kanban-tarjeta-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.kanban-tarjeta-fecha { font-size: 0.72rem; color: #8a93ab; margin-top: 6px; }

/* Movil: columnas casi de ancho completo (deslizar horizontal entre
   columnas), igual de espiritu que .etiquetas-barra ya existente. */
@media (max-width: 859px) {
  .kanban-columna { flex: 0 0 82vw; }
}

/* Escritorio: feedback real del usuario 2026-09-15 - las columnas de
   ancho fijo (260px) se veian desproporcionadas, con espacio vacio sobrante
   a la derecha en vez de aprovechar toda la pantalla. flex:1 en vez de un
   ancho fijo reparte el ancho disponible en partes iguales entre las
   columnas que esten visibles en cada momento (3 normalmente, 4 si se
   revela "No Califico" - ver boton-mostrar-columna-no-calificado). */
@media (min-width: 860px) {
  .kanban-columna { flex: 1 1 0; min-width: 220px; }
}

/* Boton "Mostrar No Califico" (peticion real del usuario 2026-09-15: "ese
   grupo no nos interesa") - franja angosta en vez de una columna completa,
   para no competir visualmente con las 3 columnas que si importan. */
.kanban-mostrar-no-calificado {
  flex: 0 0 40px;
  align-self: stretch;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: none;
  color: #8a93ab;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 14px 0;
}
.kanban-mostrar-no-calificado:hover { background: #eef1f8; color: var(--medium-blue); }