/* ── BITÁCORA ──
   [v2026.10.31-1] conversaciones.css
   2026-10-31 | + .conv-sec / .conv-sec-h / .conv-sec-punto / .conv-sec-nom / .conv-sec-res / .conv-sec-chev / .conv-sec-c: las
     secciones plegables del panel de filtros (conversaciones.html [v2026.10.31-2], conv-filters.js [v2026.10.31-1]).
     La cabecera es la de siempre (punto y título en mayúsculas chicas), ahora tocable; plegada (.conv-sec.plegada), el
     chevron gira y junto al título va lo elegido en una pastilla lila (.conv-sec-res). .conv-sec-h--fija (Buscar) no
     reacciona. Preview aprobado por Alberto el 31-10.
   [v2026.10.28-1] conversaciones.css
   2026-10-28 | + .conv-aviso-sis-c y .conv-aviso-sis-x: el aviso del sistema en el chat con su ✕ (conv-render.js [v2026.10.28-1]).
   [v2026.10.27-1] conversaciones.css
   2026-10-27 | La fila del título de la bandeja con 4px entre sus piezas (eran 6; el ícono guarda 6) y − .conv-filtros-txt (el
     botón de filtros quedó solo con su ícono): con el «?», «Conversaciones» no cabía entero con una conversación abierta.
     − .qr-ayuda-btn: «Cómo funciona» de Respuestas rápidas pasó a ser un «?» junto al título (la clase común
     .hvy-ayuda-mini--titulo, hvy-ayuda.css [v2026.10.27-1]; conversaciones.html [v2026.10.27-1]).
   [v2026.10.25-1] conversaciones.css
   2026-10-25 | VARIOS ARCHIVOS DE UNA VEZ (conv-messages.js y quick-replies.js [v2026.10.25-1]): la vista previa del
     cuadro de escribir (.conv-adj-caja) pasa a columna, con .conv-adj-cab («3 de 10 archivos · El texto va con el
     primero» y «Sacar todos», .conv-adj-todos), .conv-adj-lista (una fila por archivo, con su ✕; se desplaza si son
     muchos) y la ✕ dentro de cada fila. En Respuestas rápidas, + .qr-adj-lista (los archivos del formulario, uno
     por fila) y .qr-adj-cuenta («N de M archivos»).
   [v2026.10.24-3] conversaciones.css
   2026-10-24 (3) | La derecha de la tarjeta de la lista, opción 2 de Alberto (conv-render.js [v2026.10.24-1]): + .conv-der-col
     (la hora y, debajo, .conv-der-fila con la próxima cita, los tags y el punto de urgencia en una fila) y los sin leer
     solos a la derecha, centrados y más grandes (22px). Antes iban apilados y estiraban la tarjeta.
   [v2026.10.24-2] conversaciones.css
   2026-10-24 (2) | La Agenda en grande, «Por día», ya no queda cargada a la izquierda (Alberto, 24-10, con captura): la
     tira de días se reparte todo el ancho (.agv-dia flex: 1, con --agv-dia-min de mínimo) y, con el mes abierto, el
     mes va a la izquierda (--cg-lado) y el día, los servicios y los profesionales a la derecha, como el resto de las
     vistas en grande. En el celular sigue en una columna. Revisadas las demás vistas en grande (Embudos, Tags,
     Notas, Seguimiento, Calendario, Agenda por servicio y por terapeuta): ya ocupaban su ancho.
   [v2026.10.24-1] conversaciones.css
   2026-10-24 | La lista de conversaciones también «despegada» del fondo, como el panel del contacto y la cabecera del
     chat (Alberto, 24-10, con captura). Ya llevaba sombra (shadow-lg), pero el panel del chat viene después en la
     página y la tapaba: el del contacto se ve porque es el último. #convLeftPanel.hv-panel queda por encima
     (position: relative + z-index: --conv-izq-capa) y así su sombra cae sobre el chat.
   [v2026.10.23-14] conversaciones.css
   2026-10-23 (14) | + .conv-nota / .conv-nota-txt / .conv-nota-meta: las notas del panel del contacto con la letra del
     resto del panel (12 px el texto, 10.5 px el autor y la fecha; antes 14 y 12). contacts.js [v2026.10.23-1].
   [v2026.10.23-13] conversaciones.css
   2026-10-23 (13) | Corrección de la (12), como la explicó Alberto: el color de abierta va SOLO en la cabecera de los
     tres grupos (IA · Toggles, Contact · Lead, Mis Servicios); las secciones de adentro (Embudos, Tags, Notas…) no
     se pintan al abrirse. Y esas cabeceras de adentro son más BAJAS que la del grupo, no solo de letra más chica:
     --rp-fila-alto (nueva) = 34px contra los 40px del grupo, con el cuadro del ícono de 20px.
   [v2026.10.23-12] conversaciones.css
   2026-10-23 (12) | Dos detalles del panel del contacto (Alberto, 23-10, con captura): (1) la cabecera de lo que está
     ABIERTO (un grupo o una sección de adentro) toma el color de la tarjeta abierta de la lista (--hv-abierta-fondo);
     (2) los títulos de adentro (Embudos, Tags, Notas, Agenda…) quedan más chicos que el del grupo: --rp-g-letra sube
     a 12.5px y --rp-fila-letra (nueva) es 11px.
   [v2026.10.23-11] conversaciones.css
   2026-10-23 (11) | EL PANEL DEL CONTACTO CON EL LOOK DE LA LISTA (Alberto, 23-10: «la barra derecha se ve un poquito
     tosca»; conversaciones.html [v2026.10.23-8]). + .rp-tarjetas: el panel sobre el gris, con la ficha y los grupos
     como tarjetas de hv-tarjeta.css (--hv-fondo, --hv-borde, --hv-radio, --hv-sombra, --hv-sep). + .rp-grupo (la
     tarjeta del grupo) y .rp-g-cab / .rp-g-ico / .rp-g-txt / .rp-g-chev (su cabecera: el cuadrito lila del ícono
     como .hv-titulo, el texto en gris oscuro, sin la franja de degradado). Las filas de adentro pasan el celeste
     del hover a --hv-hover-fondo y la última pierde su línea (la tarjeta ya cierra).
   [v2026.10.23-10] conversaciones.css
   2026-10-23 (10) | .conv-tip (el último mensaje en un globo) del ancho de su texto (width: max-content), con el ancho de antes como máximo: con un texto corto ya no queda
     una caja ancha con espacio vacío (Alberto, 23-10, con captura: «el globo debe adaptarse al mensaje»).
   [v2026.10.23-9] conversaciones.css
   2026-10-23 (9) | MENSAJES ELIMINADOS (conv-render.js [v2026.10.23-2]): + .conv-elim (la franja «🚫 …» con quién y
     cuándo), .conv-elim-orig (lo que decía, tenue y tachado) y .conv-elim-btn (la papelera de los mensajes que
     salieron de la empresa: aparece al pasar el mouse por la fila .conv-fila-env; en pantallas táctiles, tenue
     siempre a la vista).
   [v2026.10.23-8] conversaciones.css
   2026-10-23 (8) | LA VISTA PREVIA DEL ADJUNTO, COMPACTA (Alberto, 23-10: «muy grotesca»): + .conv-adj-caja (una
     tarjeta con el borde y la sombra del editor), .conv-adj (ícono de 32px en un círculo suave del color del tipo,
     o la miniatura de la imagen; nombre; «tipo · peso»), .conv-adj-oir (▶) y .conv-adj-quitar (✕).
   [v2026.10.23-7] conversaciones.css
   2026-10-23 (7) | EL FORMULARIO DE RESPUESTAS RÁPIDAS EN PASOS (conversaciones.html [v2026.10.23-6], quick-replies.js
     [v2026.10.23-2]): + .qr-paso (número en un círculo que pasa a ✓ verde con .hecho, título y su explicación),
     .qr-guia (la guía de la primera vez), .qr-ayuda-btn («Cómo funciona»), .qr-form-pie y .qr-falta (qué falta;
     verde con .listo), .qr-adj-oir (escuchar el audio) y «Guardar» apagado mientras falta algo.
   [v2026.10.23-6] conversaciones.css
   2026-10-23 (6) | RESPUESTAS RÁPIDAS CON ARCHIVO (quick-replies.js [v2026.10.23-1]): + .qr-adj-fila (la fila del
     archivo en el formulario, donde también se abre la grabadora), .qr-adj-btn, .qr-adj-chip (el archivo
     elegido, con su ✕) y .qr-adj-item (el archivo de cada respuesta en la lista). El panel se apoya ARRIBA de
     todo lo que hay sobre la barra de escribir (la vista previa del archivo, el aviso de entrega): antes iba a
     64px fijos del fondo y tapaba la vista previa del archivo recién elegido; y si no cabe, se desplaza.
   [v2026.10.23-5] conversaciones.css
   2026-10-23 (5) | (1) En celular (≤768px) el envoltorio de Conversaciones anula los 8px de aire que styles.css
     le pone a toda página: la cabecera-tarjeta quedaba más abajo que en Seguimiento (Alberto, 23-10). Lo mismo
     que ya hace Embudos con .emb-wrap. (2) El botón de filtros toma su look de .hv-btn-plegar (hv-tarjeta.css):
     acá queda solo lo que esconde su texto. (3) #advancedFiltersIcon gira con .abierto (conv-filters.js lo hace
     a mano; la regla común no estorba).
   [v2026.10.23-4] conversaciones.css
   2026-10-23 (4) | LA TARJETA ÚNICA en la lista (conv-render.js [v2026.10.23-1]): se va el puente que vestía a
     .conversation-item con las variables del editor —ahora es .hv-card y lo trae de hv-tarjeta.css—.
     + .conv-tags-puntos / .conv-tag-punto (los puntitos de los tags, a la derecha de la tarjeta).
   [v2026.10.23-3] conversaciones.css
   2026-10-23 (3) | La fila del título la da .hv-titulo (hv-tarjeta.css [v2026.10.23-2]) y el «parte en el borde
     de arriba» lo da .hv-cabecera.pegada: acá queda solo el aire lateral de la tarjeta (8px) y el botón de
     filtros, más compacto: con el panel en w-64 (conversaciones.html [v2026.10.23-3]) el título cabe entero.
   [v2026.10.23-2] conversaciones.css
   2026-10-23 (2) | El encabezado-tarjeta a la altura de la cabecera del chat (Alberto, 23-10): parte en el borde
     de arriba (sin margen superior, esquinas redondeadas solo abajo) y su fila (.conv-cab-fila) mide
     CONV_CAB_ALTO = 48px, lo mismo que #chatHeader (h-12). El botón de filtros queda compacto (solo ícono
     y chevron; .conv-filtros-txt oculto) y el panel desplegado lleva su aire abajo. conversaciones.html
     [v2026.10.23-2].
   [v2026.10.23-1] conversaciones.css
   2026-10-23 | EL ENCABEZADO COMO TARJETA (la opción B, aprobada por Alberto el 23-10 sobre el demo real;
     hv-tarjeta.css [v2026.10.23-1]). El panel izquierdo va sobre el gris (.hv-panel, conversaciones.html
     [v2026.10.23-1]); su encabezado (título y Filtros avanzados) es una tarjeta (.hv-cabecera); y la lista
     lleva aire a los lados, con cada conversación como tarjeta separada, con los MISMOS valores del
     editor (fondo, borde, radio, sombra; hover y abierta con los suyos). Es un puente: la tarjeta común
     (hvTarjeta) llega a Conversaciones en su propio cambio y reemplaza estas reglas por las de .hv-card.
     Todas acotadas a #convLeftPanel.hv-panel: sin esa clase nada cambia.
   [v2026.10.22-1] conversaciones.css
   2026-10-22 | LA BARRA DE ESCRIBIR EN EL CELULAR (conversaciones.html [v2026.10.22-1]; preview aprobado por
     Alberto el 22-10, con su propuesta del menú vertical): + .conv-mas (el «+», solo bajo 900px) y .conv-herr
     (las cinco herramientas). En el computador .conv-herr es display: contents y nada cambia. En el celular
     es un menú vertical hacia arriba, solo íconos de 44px con su globo a la derecha, que abre el «+» (el «+»
     no cambia de forma al abrir: decisión de Alberto). + #convComposer con min-width: 0 y overflow visible:
     el desborde de siete botones era lo que corría la pantalla hacia la izquierda.
   [v2026.10.15-1] conversaciones.css
   2026-10-15 | Los visitantes de heavensy.cl aparte (vista previa aprobada por Alberto el 15-10): + .chip-vis
     (el chip VISITANTES, borde punteado y el logo), .conv-aviso-visitantes (el aviso de arriba de la lista)
     y .conv-visitante-borra («Sin datos · se borra en N días» en cada conversación).
   [v2026.10.13-1] conversaciones.css
   2026-10-13 | + .conv-ampliar-tits y .conv-ampliar-que: bajo el título de la ventana en grande, una línea que dice
     para qué sirve la sección (conv-ampliar.js [v2026.10.13-1]).
   [v2026.10.11-4] conversaciones.css
   2026-10-11 (4) | LA AGENDA EN GRANDE APROVECHA EL ANCHO (Alberto, 11-10: «queda mucho espacio sin ocupar»).
     «Por profesional» y «Por día» ya no dejan columnas vacías: las tarjetas se reparten el ancho (auto-fit, con
     --agv-tarjeta-min de mínimo). En «Por profesional», donde cada servicio trae pocas horas, los servicios de
     una tarjeta van en columnas cuando caben (--agv-servicio-min); el que tiene el panel de reservar abierto
     ocupa todo el ancho. En «Por día» las horas del día ya llenan la fila.
   [v2026.10.11-3] conversaciones.css
   2026-10-11 (3) | + .conv-sin-escribir: «Todavía no te escribe» en vez del último mensaje, en gris claro y
     cursiva, para quien se registró desde «Nueva hora» y nunca ha escrito (conv-render.js [v2026.10.11-2]).
   [v2026.10.11-2] conversaciones.css
   2026-10-11 (2) | + .conv-prox: el ícono de la próxima cita junto al nombre en la lista (conv-proxima.js
     [v2026.10.11-1]). Sin fondo, del tamaño del ticket que reemplaza (Alberto, 11-10: «para que no se vea
     muy saturada la tarjeta»); el color dice cómo está: verde (ok), ámbar (esperando el pago), morado (hoy).
     + .conv-prox-tit/-lin/-saldo/-mas/-pie: su globo (el .hvy-tip de hvy-permisos), como la vista previa.
   [v2026.10.11-1] conversaciones.css
   2026-10-11 | LA AGENDA Y EL CALENDARIO POR PROFESIONAL, EN GRANDE (vista previa aprobada por Alberto el 11-10;
     conv-agenda-vistas.js y conv-calendar-vistas.js [v2026.10.11-1]). Reemplaza el arreglo de la Agenda de la
     entrada [v2026.10.09-2] (el calendario «Elegir otro día» a la derecha ya no existe).
     · Agenda: arriba «Ver» y los profesionales en una fila, con sus nombres; las próximas citas en tarjetas; la
       vista a lo ancho: «Por servicio» con los nombres de quién hace cada uno, «Por profesional» en dos columnas
       y «Por día» con un profesional por columna (todo abierto: en la barra se pliega). En el celular, una
       columna.
     · Calendario: «Ver» y los profesionales arriba (antes el filtro Prestador); en el Mes, cuántas citas de cada
       profesional en cada día (.ccal-num en vez del punto); la Semana con sus nombres y qué tan lleno está; el
       Día como grilla hora a hora (en el celular, la lista de cada uno); las cabañas con su nombre en el tablero.
       En el celular, la Semana y el tablero de cabañas como en la barra (solo las caritas).
   [v2026.10.09-2] conversaciones.css
   2026-10-09 (2) | LAS SECCIONES EN GRANDE, ARMADAS PARA EL ANCHO (Alberto, 09-10: «Agenda y Calendario se ven
     pésimo»; vista previa aprobada el mismo día). Reemplaza el arreglo de dos columnas de la entrada
     anterior; todo cuelga de .conv-ampliado--<sección> y la barra lateral no cambia.
     · Agenda: arriba las próximas citas en tarjetas; a la izquierda los próximos cupos (sin scroll
       propio, la duración junto a la flecha) y a la derecha el calendario siempre a la vista con su
       título «Elegir otro día» (sin «Ver más fechas»: #agendaCalWrapper con display:contents); debajo,
       a lo ancho, los horarios del día, «Otra hora» y el recuadro de reservar. El aviso de una reserva
       que espera el pago, arriba. Por noches (#agendaNightCal) queda su columna, centrada. En el
       celular, el mismo orden en una columna.
     · Calendario: los filtros en una barra arriba, todo a la vista; el mes a la izquierda con celdas
       más bajas; el día a la derecha, o .cal-dia-vacio mientras no se elige (conv-calendar.js
       [v2026.10.09-2]). En el celular cada filtro en una fila que se desliza de lado.
     · Embudos: cada embudo como tarjeta blanca, como Notas; las etapas un poco más grandes.
     · El ancho de la columna de la derecha y el espacio entre columnas: --cg-lado y --cg-espacio.
   [v2026.10.09-1] conversaciones.css
   2026-10-09 | EL PANEL DEL CONTACTO, MÁS LIVIANO (vista previa aprobada por Alberto el 09-10):
     · + .conv-dup-linea y sus partes: «Posible duplicado» en una línea que se despliega (.abierto) y
       se oculta con la ✕ (conv-render.js [v2026.10.09-1]); + .conv-dup-mostrar, lo que queda oculto.
     · + .conv-ampliar, el botón ⤢ de cada sección; + .conv-ampliar-velo / -ventana / -cab / -cuerpo,
       la ventana grande (conv-ampliar.js [v2026.10.09-1]), más ancha para Agenda y Calendario
       (--ancha) y a pantalla completa en el celular; + .conv-ampliado-hueco, lo que queda en la barra.
     · .conv-ampliado--contactAgendaSection: la Agenda en dos columnas (los cupos a la izquierda; «Ver
       más fechas», el calendario y las próximas citas a la derecha). .conv-ampliado--
       contactCalendarSection: el mes y su leyenda a la izquierda; filtros y resumen a la derecha. En el
       celular, una columna.
     · Los encabezados de Embudos, Tags, Notas y Seguimiento (ahora con teclado): un borde lila suave
       al llegar con Tab, en vez del recuadro negro del navegador.
     · La ventana va sobre la barra de arriba (1000) en --conv-ampliar-z. Lo que se abre DESDE una
       sección en grande y se monta en <body> más abajo queda sobre ella mientras está abierta
       (body.conv-ampliar-abierto): los avisos de showToast (.fixed.z-50, los de la Agenda) y los
       formularios .modal-overlay (el «Arriendo fijo para este cliente», calendario-arriendos.js).
   [v2026.10.08-1] conversaciones.css
   2026-10-08 | LOS TAGS DE CADA PERSONA (vista previa aprobada por Alberto el 08-10): + .ctag-*, lo de
     #contactTagsPicker (contacts.js [v2026.10.08-1]): el buscador, la lista para tocar y poner
     (.ctag-op, con el color del tag en --c), crear uno nuevo con los 8 colores (.ctag-nuevo,
     .ctag-color) y «Administrar mis tags» (.ctag-adm-fila, editar en la fila y confirmar el borrado).
   [v2026.10.07-1] conversaciones.css
   2026-10-07 | + .conv-pronto y .conv-pronto-tag: un botón de una función que todavía no existe
     («Cliente VIP» y «Aliarme», conversaciones.html [v2026.10.07-1]): atenuado, sin efecto y con la marca
     «Pronto» (encima del borde del botón, para que no lo ensanche).
   [v2026.10.03-1] conversaciones.css
   2026-10-03 | + .hvy-lnk: los enlaces dentro de un mensaje (conv-render.js [v2026.10.03-1]), con
     su flechita de "se abre aparte". Los arma hvy-texto.js.
   [v2026.10.02-1] conversaciones.css
   2026-10-02 | + .conv-tip: el globo con el último mensaje al pasar el mouse por un contacto de
     la lista (conv-render.js [v2026.10.02-1]); mismos valores que .hv-tip de la campanita.
     + .conv-globo-fallo, .conv-env-fallo y .conv-env-fallo-ico: el globo que no salió, en rojo
     suave, con el motivo, "Reintentar" y "Editar" (conv-messages.js [v2026.10.02-1]).
   [v2026.09.29-2] conversaciones.css
   2026-09-29 (2) | + .conv-dup-chip-linea: en la lista, "posible duplicado" pasa a su propia
     línea bajo el último mensaje (conv-render.js [v2026.09.29-2]). Al lado del nombre, en la
     lista angosta, le quitaba todo el espacio: el nombre desaparecía y la marca tapaba la hora.
   [v2026.09.29-1] conversaciones.css
   2026-09-29 | Chat de la página, una persona un contacto (conv-render.js [v2026.09.29-1]):
     + .conv-dup-chip, la marca "posible duplicado" en la lista; + .conv-mail, el correo
     verificado bajo el teléfono del contacto; + .conv-dup, el recuadro con los otros contactos
     de la página con el mismo WhatsApp y su botón "Abrir". Ámbar suave, como los avisos que
     piden mirar algo sin ser un error.
   [v2026.09.21-1] conversaciones.css
   2026-09-21 | + .conv-comp-accion y .conv-comp-revisado: el boton "Marcar como revisado"
     de la franja del comprobante y lo que queda una vez revisado (conv-render
     [v2026.09.21-2]). Revisada, la franja se ATENUA: sigue diciendo que hubo un problema,
     pero ya no pide atencion. El candado lo pone hvyCandado con su estilo de siempre.
   [v2026.09.20-1] conversaciones.css
   2026-09-20 | + .conv-comp: el aviso del comprobante dentro del globo de la imagen
     (conv-render.js [v2026.09.20-1]; preview aprobado por Alberto el 20-09). Verde
     cuando se leyo bien, ambar cuando hay que mirarlo con atencion, rojo suave cuando
     no parece un comprobante. Los mismos colores que ya significan eso en el calendario
     y en la campanita (#1D8A63, #C98A16, #B3261E), para no inventar un codigo nuevo.
   [v2026.08.24-1] conversaciones.css
   2026-08-24 | + .conv-punto-urg: el punto de urgencia junto al nombre. Vive aparte del
     circulo de no leidos porque ese desaparece al abrir la conversacion, y una
     conversacion urgente sigue urgente despues de mirarla.
   [v2026.08.23-2] conversaciones.css
   2026-08-23 (2) | Los colores de urgencia pasan a los del calendario (#B3261E y
     #C98A16): mas frios y, sobre todo, los mismos que ya significan lo mismo alla.
   [v2026.08.23-1] conversaciones.css
   2026-08-23 | + los colores de urgencia del circulo de no atendida.
   ────────────────────────────────────────────────────────────────── */
/* ============================================
   conversaciones.css
   Estilos del módulo de Conversaciones
   Extraído de conversaciones.html
============================================ */

/* ── Panel toggle tabs ── */
.panel-tab {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 48px;
  background: #C9D9FF;
  border: 1px solid #b2c4fb;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  transition: background .15s;
  font-size: 9px;
  color: #7D84C1;
}
.panel-tab:hover { background: #b2c4fb; }
.panel-tab-left {
  right: -18px;
  border-radius: 0 6px 6px 0;
  border-left: none;
}
.panel-tab-right {
  left: -18px;
  border-radius: 6px 0 0 6px;
  border-right: none;
}
#convLeftPanel.collapsed {
  width: 0 !important;
  overflow: hidden;
  border: none;
}
#contactPanel.panel-collapsed {
  width: 0 !important;
  overflow: hidden;
  border: none;
}
@media (max-width: 900px) {
  #btnCloseContactPanel { display: block !important; }
}

#convLeftPanel  { transition: width .25s ease; overflow: hidden !important; flex-shrink: 0; }
#convLeftPanel.panel-hidden { width: 0 !important; min-width: 0 !important; border: none !important; }
#contactPanel.panel-hidden  { width: 0 !important; min-width: 0 !important; border: none !important; overflow: hidden !important; }

[data-tooltip] {
  position: relative;
}
[data-tooltip]::before {
  content: attr(data-tooltip);
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: white;
  color: #374151;
  border: 0.5px solid #e0e7ff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  font-size: 10px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 100;
}
[data-tooltip]::after {
  content: '';
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-bottom-color: white;
  pointer-events: none;
  z-index: 100;
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after { display: block; }

/* ── Filter chips — estilo tag violeta Heavensy ── */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  height: 20px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  border: 1.5px solid #e0e7ff;
  background: #f5f3ff;
  color: #7D84C1;
  transition: background .15s, border-color .15s, color .15s;
  flex-shrink: 0;
  outline: none;
}
.filter-chip:hover { background: #ede9fe; border-color: #ede9fe; color: #6D28D9; }
.filter-chip.active { background: #ede9fe; border-color: #ede9fe; color: #6D28D9; }
.filter-chip .filter-count {
  font-size: 9px; font-weight: 700;
  border-radius: 999px; padding: 0 5px; line-height: 1.6;
  background: #ede9fe; color: #7D84C1;
}
.filter-chip.active .filter-count { background: rgba(109,40,217,0.15); color: #6D28D9; }
/* ── [31-10-2026] Las secciones plegables del panel de filtros ── */
.conv-sec { min-width: 0; }
.conv-sec-h {
  display: flex; align-items: center; gap: 6px; width: 100%;
  margin: 4px 0 6px; padding: 2px 2px 2px 0; border: 0; border-radius: 6px; background: none;
  font-family: inherit; text-align: left; cursor: pointer; user-select: none;
}
.conv-sec-h:hover { background: #f8f7ff; }
.conv-sec-h--fija { cursor: default; }
.conv-sec-h--fija:hover { background: none; }
.conv-sec-punto { width: 4px; height: 4px; border-radius: 50%; background: #7D84C1; flex-shrink: 0; display: inline-block; }
.conv-sec-nom { font-size: 10px; font-weight: 700; color: #7D84C1; text-transform: uppercase; letter-spacing: .07em; }
.conv-sec-res {
  display: none; font-size: 10px; font-weight: 600; color: #6D28D9; background: #ede9fe; border-radius: 999px;
  padding: 1px 7px; margin-left: 2px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conv-sec-chev { margin-left: auto; color: #9ca3af; font-size: 9px; transition: transform .15s; }
.conv-sec.plegada .conv-sec-chev { transform: rotate(-90deg); }
.conv-sec.plegada .conv-sec-res:not(:empty) { display: inline-block; }
.conv-sec.plegada .conv-sec-c { display: none; }

/* [15-10-2026] Visitantes de heavensy.cl sin datos */
.filter-chip.chip-vis { border-style: dashed; }
.filter-chip.chip-vis[hidden] { display: none; }
.filter-chip.chip-vis img { width: 12px; height: 12px; border-radius: 50%; }
.conv-aviso-visitantes { margin: 8px 12px 4px; font-size: 11.5px; color: #6b7280; background: #f5f3ff; border: 1px solid #ede9fe; border-radius: 9px; padding: 7px 10px; line-height: 1.45; }
.conv-aviso-visitantes b { color: #6D28D9; }
.conv-visitante-borra { font-size: 10.5px; color: #9a8bd6; margin-top: 2px; }
.conv-visitante-borra i { margin-right: 2px; }

/* ── Botón refresh panel derecho ── */
.rp-refresh-btn {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid #d0dcf5;
  background: #eff4fe;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .4s ease;
  flex-shrink: 0;
  outline: none;
  position: relative;
  box-shadow: 0 1px 4px rgba(125,132,193,0.10);
}
.rp-refresh-btn:hover { background: #e5edfb; border-color: #c0cef0; }
.rp-refresh-btn.spinning svg { animation: rp-spin .4s ease forwards; }
@keyframes rp-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Botón filtros avanzados hover */
#advancedFiltersToggle:hover { background: #e5edfb !important; border-color: #c0cef0 !important; }

#filterChipsContainer::-webkit-scrollbar { display: none; }

@media (max-height: 500px) and (orientation: landscape) {
  #convLeftPanel {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: block !important;
  }
  #conversationsList {
    overflow-y: visible !important;
    height: auto !important;
    flex: none !important;
  }
  #convLeftPanel > div:first-child {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ── URGENCIA: el color del circulo de no atendida  [23-08-2026] ──────────────
   Clases propias y no las de Tailwind: bg-red-500 traeria el rojo generico del
   framework, y aca el rojo significa "necesita respuesta hoy" — conviene que sea el
   mismo de la campanita y de los chips del calendario, no otro parecido.
   ────────────────────────────────────────────────────────────────────────── */
/* [23-10-2026 (4)] También sobre el círculo de la tarjeta única (.hv-noleidos), que trae su lila. */
.conv-urg-rojo,  .hv-noleidos.conv-urg-rojo  { background: #B3261E; }
.conv-urg-ambar, .hv-noleidos.conv-urg-ambar { background: #C98A16; color: #fff !important; }

/* El ambar necesita texto oscuro: sobre amarillo, el blanco no se lee. El !important
   es por el text-white que trae la clase de Tailwind en el mismo elemento. */

/* [24-08-2026] Punto de urgencia en la lista. Chico y antes del nombre: se ve al barrer
   la lista con la vista, sin competir con el contenido. */
.conv-punto-urg {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0; display: inline-block;
}
.conv-punto-rojo  { background: #B3261E; }
.conv-punto-ambar { background: #C98A16; }

/* ── EL AVISO DEL COMPROBANTE  [20-09-2026] ──────────────────────────────────
   Va DENTRO del globo, debajo de la imagen: es donde la persona la esta mirando.
   Solo aparece cuando el sistema tiene algo que decir; un comprobante normal no
   agrega nada a la pantalla. */
.conv-comp {
  margin-top: 8px;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.4;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.conv-comp i { margin-top: 1px; }
.conv-comp b { display: block; }
.conv-comp .conv-comp-leido { display: block; margin-top: 4px; opacity: .85; }
.conv-comp.ok   { background: #E1F5EE; color: #12684A; }
.conv-comp.duda { background: #FAEEDA; color: #854F0B; }
.conv-comp.no   { background: #FDECEA; color: #8a1f18; }

/* [21-09-2026] "Marcar como revisado" y lo que queda después. */
.conv-comp .conv-comp-accion {
  display: inline-block;
  margin-top: 7px;
  border: 1px solid currentColor;
  border-radius: 7px;
  padding: 3px 10px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  color: inherit;
  background: rgba(255, 255, 255, .6);
  cursor: pointer;
}
.conv-comp .conv-comp-accion:hover:not([disabled]) { background: #fff; }
.conv-comp .conv-comp-accion[disabled] { opacity: .6; cursor: default; }
.conv-comp .conv-comp-revisado { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; }
/* Revisada: se atenúa. El problema queda registrado, pero ya no pide atención. */
.conv-comp.revisado { opacity: .62; }

/* ── [29-09-2026] Chat de la página: una persona, un contacto ── */
.conv-dup-chip{display:inline-flex;align-items:center;gap:3px;background:#fff7ed;color:#b45309;border:1px solid #fed7aa;border-radius:999px;font-size:9.5px;font-weight:700;padding:0 6px;white-space:nowrap;flex-shrink:0}
.conv-dup-chip i{font-size:8px}
.conv-dup-chip-linea{align-self:flex-start;margin-top:3px}
.conv-mail{align-items:center;justify-content:center;gap:5px;font-size:11.5px;color:#6b7280;margin:0 0 8px;max-width:100%}
.conv-mail span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-mail .conv-mail-ok{color:#16a34a}
.conv-dup{border:1px solid #fed7aa;background:#fffbf5;border-radius:10px;padding:8px 10px;margin:0 0 10px;text-align:left;font-size:11.5px;color:#7c4a03;line-height:1.5}
.conv-dup-t{font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:#b45309;margin-bottom:4px}
.conv-dup-f{display:flex;flex-direction:column;gap:6px}
.conv-dup-f + .conv-dup-f{border-top:1px dashed #fed7aa;margin-top:6px;padding-top:6px}
.conv-dup-f b{color:#7c2d12}
.conv-dup-abrir{align-self:flex-start;border:none;border-radius:8px;padding:5px 12px;background:#9961FF;color:#fff;font:600 11.5px 'Poppins',sans-serif;cursor:pointer}
.conv-dup-abrir:hover{background:#7c3aed}

/* ── [02-10-2026] El último mensaje en un globo (lista de conversaciones) ──
   Elemento propio creado por conv-render.js. Hermano de .hv-tip (campanita): mismos valores. */
.conv-tip{display:none;position:fixed;z-index:10000;background:#fff;border:1px solid #f0edfa;border-radius:10px;padding:9px 11px;width:max-content;max-width:min(280px,calc(100vw - 16px));box-shadow:0 8px 26px rgba(30,25,80,.14);font-family:'DM Sans',sans-serif;pointer-events:none}
.conv-tip-ttl{font-size:9.5px;letter-spacing:.06em;color:#b8bed0;margin-bottom:6px;font-weight:700;text-transform:uppercase}
.conv-tip-txt{font-size:12px;color:#383838;line-height:1.45;white-space:pre-wrap;word-break:break-word}

/* ── [02-10-2026] El globo de un envío que no salió ── */
.conv-globo-fallo{background:#fdeeee !important}
.conv-env-fallo-ico{color:#B3261E}
.conv-env-fallo{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:4px;font-size:11px;color:#a12a2a;line-height:1.4}
.conv-env-fallo button{border:none;background:none;padding:0;font:700 11px 'DM Sans',sans-serif;color:#6a3fd6;cursor:pointer}
.conv-env-fallo button:hover{text-decoration:underline}

/* [03-10-2026] Los enlaces dentro de un mensaje (hvy-texto.js). */
.hvy-lnk{color:#355BB6;font-weight:600;text-decoration:underline;word-break:break-all}
.hvy-lnk i{font-size:.7em;margin-left:3px;text-decoration:none;display:inline-block}

/* [07-10-2026] Una función que todavía no existe: se ve, atenuada, con la marca «Pronto». */
.conv-pronto { opacity: .6; cursor: default; position: relative; }
.conv-pronto-tag {
  position: absolute; top: -7px; right: -3px;   /* encima del borde: no ensancha el botón */
  padding: 1px 6px; border-radius: 999px;
  background: #fff; color: #6b7cc4; border: 1px solid #c9d4f5;
  font-size: 9px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; line-height: 14px;
}

/* ── [08-10-2026] TAGS: los de cada persona (#contactTagsPicker, contacts.js) ── */
.ctag-buscar { display: flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #e3e0ef; border-radius: 9px; padding: 6px 9px; }
.ctag-buscar i { font-size: 11px; color: #9BA3C0; }
.ctag-buscar input { border: 0; outline: 0; flex: 1; min-width: 0; font: 500 12px 'DM Sans', sans-serif; color: #383838; background: transparent; }
.ctag-buscar:focus-within { border-color: #b9a8f5; box-shadow: 0 0 0 3px rgba(153, 97, 255, .12); }
/* El anillo de foco de todos los campos de texto (styles.css) lo pone aquí la caja, no el campo. */
.ctag-buscar input[type="text"]:focus { box-shadow: none; }
.ctag-sub { font-size: 10px; font-weight: 700; color: #7D84C1; text-transform: uppercase; letter-spacing: .06em; margin: 10px 0 6px; }
.ctag-sub-fila { display: flex; justify-content: space-between; align-items: center; margin-top: 0; }
.ctag-lista { display: flex; flex-wrap: wrap; gap: 5px; }
.ctag-op { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--c) 45%, #fff); background: #fff; color: var(--c);
  font: 600 10.5px 'DM Sans', sans-serif; cursor: pointer; max-width: 100%; }
.ctag-op:hover { background: color-mix(in srgb, var(--c) 8%, #fff); border-style: solid; }
.ctag-op i { font-size: 8.5px; opacity: .7; }
.ctag-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.ctag-vacio { font-size: 11px; color: #9ca3af; }
.ctag-nuevo { margin-top: 8px; background: #fff; border: 1px solid #E4DAFF; border-radius: 10px; padding: 9px 10px; }
.ctag-nuevo-t { font-size: 12px; color: #3b2f7a; margin-bottom: 7px; overflow-wrap: anywhere; }
.ctag-nuevo-t b { color: var(--c); }
.ctag-colores { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; }
.ctag-colores-edit { margin: 2px 0 4px 8px; }
.ctag-color { width: 20px; height: 20px; border-radius: 50%; background: var(--c); border: 2px solid #fff; box-shadow: 0 0 0 1px #e5e7eb; cursor: pointer; padding: 0; }
.ctag-color.on { box-shadow: 0 0 0 2px var(--c); }
.ctag-color:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.ctag-crear { width: 100%; border: 0; border-radius: 8px; padding: 7px; background: linear-gradient(90deg, #9961FF, #5b8dee); color: #fff; font: 600 11.5px 'Poppins', sans-serif; cursor: pointer; }
.ctag-crear i { margin-right: 6px; }
.ctag-pie { display: flex; justify-content: flex-end; margin-top: 9px; }
.ctag-pie[hidden] { display: none; }
.ctag-admin-btn { border: 0; background: none; color: #7c3aed; font: 600 11px 'DM Sans', sans-serif; cursor: pointer; display: inline-flex; gap: 5px; align-items: center; padding: 2px 0; }
.ctag-adm { display: flex; flex-direction: column; gap: 4px; }
.ctag-adm-fila { display: flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #eef0f6; border-radius: 9px; padding: 6px 8px; }
.ctag-adm-fila .ctag-dot { width: 11px; height: 11px; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e5e7eb; }
.ctag-adm-nom { flex: 1; min-width: 0; font: 600 11.5px 'DM Sans', sans-serif; color: #383838; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctag-adm-n { font-size: 10px; color: #9BA3C0; white-space: nowrap; }
.ctag-adm-acc { border: 0; background: none; color: #9BA3C0; font-size: 10.5px; cursor: pointer; padding: 2px 3px; }
.ctag-adm-acc:hover { color: #7c3aed; }
.ctag-adm-acc.borrar:hover { color: #dc2626; }
.ctag-adm-in { flex: 1; min-width: 0; border: 1px solid #b9a8f5; border-radius: 6px; padding: 3px 6px; font: 600 11.5px 'DM Sans', sans-serif; color: #383838; outline: 0; }
.ctag-adm-fila .ctag-adm-in[type="text"]:focus { box-shadow: 0 0 0 2px rgba(153, 97, 255, .14); }
.ctag-adm-confirma { background: #FDECEA; border: 1px solid #F6D5D1; border-radius: 9px; padding: 8px 9px; font-size: 11px; color: #5B2C29; overflow-wrap: anywhere; }
.ctag-adm-confirma .bot { display: flex; gap: 6px; margin-top: 7px; justify-content: flex-end; }
.ctag-adm-confirma button { border-radius: 7px; padding: 4px 10px; font: 600 11px 'DM Sans', sans-serif; cursor: pointer; }
.ctag-adm-confirma .si { background: #dc2626; color: #fff; border: 0; }
.ctag-adm-confirma .no { background: #fff; color: #6b7194; border: 1px solid #e5e7eb; }

/* ── [09-10-2026] «Posible duplicado» en una línea (conv-render.js _convPintarDuplicados) ── */
.conv-dup-linea{width:100%;margin-top:10px;border:1px solid #fed7aa;background:#fffbf5;border-radius:8px;font-size:11px;color:#b45309;text-align:left}
.conv-dup-cab{display:flex;align-items:center;gap:4px;padding:3px 4px 3px 9px}
.conv-dup-abre{flex:1;min-width:0;display:flex;align-items:center;gap:6px;background:none;border:none;color:inherit;font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;padding:2px 0;text-align:left}
.conv-dup-chev{margin-left:auto;font-size:9px;transition:transform .15s}
.conv-dup-linea.abierto .conv-dup-chev{transform:rotate(90deg)}
.conv-dup-x{flex-shrink:0;background:none;border:none;color:#d6a27a;cursor:pointer;font-size:12px;padding:2px 5px;border-radius:5px}
.conv-dup-x:hover,.conv-dup-x:focus-visible{background:#fff1e6;color:#b45309;outline:none}
.conv-dup-det{display:none;padding:0 9px 8px;color:#7c4a03;line-height:1.5;font-size:11.5px}
.conv-dup-linea.abierto .conv-dup-det{display:block}
.conv-dup-mostrar{margin-top:8px;background:none;border:none;font-family:inherit;font-size:10.5px;color:#9ca3af;cursor:pointer;text-decoration:underline dotted}
.conv-dup-mostrar:hover{color:#b45309}

/* ── [09-10-2026] Abrir una sección en grande (conv-ampliar.js) ── */
#contactPanel [role="button"][tabindex="0"]:focus{outline:none}
#contactPanel [role="button"][tabindex="0"]:focus-visible{outline:2px solid #c4b5fd;outline-offset:-2px;border-radius:6px}
.conv-ampliar{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:6px;border:1px solid transparent;background:none;color:#9961FF;cursor:pointer;font-size:10.5px;padding:0}
.conv-ampliar:hover,.conv-ampliar:focus-visible{background:#eef2ff;border-color:#c7d2fe;outline:none}
:root{--conv-ampliar-z:3000}   /* sobre la barra de arriba (nav.hv-nav, 1000) */
.conv-ampliar-velo{position:fixed;inset:0;background:rgba(30,35,70,.35);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:var(--conv-ampliar-z);padding:16px}
/* Lo que se abre desde la sección en grande y se monta en <body> por debajo: encima de la ventana */
body.conv-ampliar-abierto > .fixed.z-50,
body.conv-ampliar-abierto > .modal-overlay{z-index:calc(var(--conv-ampliar-z) + 100)}
.conv-ampliar-velo.on{display:flex}
.conv-ampliar-ventana{width:min(640px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(30,25,80,.25);display:flex;flex-direction:column;overflow:hidden}
.conv-ampliar-ventana--ancha{width:min(960px,100%)}
.conv-ampliar-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid #e5e7eb;flex-shrink:0}
.conv-ampliar-tit{display:flex;align-items:center;gap:10px;min-width:0;font-weight:700;color:#1E2A5E;font-size:14px}
.conv-ampliar-tit i{color:#9961FF}
.conv-ampliar-tit small{font-weight:500;color:#6b7280;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* [13-10-2026] El título y, debajo, para qué sirve la sección (conv-ampliar.js [v2026.10.13-1]). */
.conv-ampliar-tits{min-width:0;flex:1}
.conv-ampliar-que{margin-top:3px;font-size:11.5px;line-height:1.4;color:#7D84C1;font-weight:500}
.conv-ampliar-que:empty{display:none}
.conv-ampliar-cerrar{flex-shrink:0;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:none;color:#7D84C1;cursor:pointer;font-size:15px}
.conv-ampliar-cerrar:hover,.conv-ampliar-cerrar:focus-visible{background:#eef2ff;border-color:#c7d2fe;color:#9961FF;outline:none}
.conv-ampliar-cuerpo{padding:14px 16px 16px;overflow:auto;font-size:12px;flex:1;min-height:0}
.conv-ampliar-cuerpo > .bg-gray-50{background:none;border:0;box-shadow:none;padding:0}
body.conv-ampliar-abierto{overflow:hidden}
.conv-ampliado-hueco{margin:0 8px 8px;border:2px dashed #d8d2f6;border-radius:12px;padding:12px 10px;background:#faf8ff;color:#8b84c9;font-size:11px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.conv-ampliado-volver{background:#fff;border:1px solid #c4b5fd;color:#9961FF;border-radius:999px;font:600 11px 'DM Sans',sans-serif;padding:3px 10px;cursor:pointer}
.conv-ampliado-volver:hover{background:#f5f3ff}
@media (max-width:900px){
  .conv-ampliar-velo{padding:0}
  .conv-ampliar-ventana,.conv-ampliar-ventana--ancha{width:100%;height:100%;max-height:none;border-radius:0}
}

/* ── [09-10-2026 (2)] Las secciones en grande, armadas para el ancho (vista previa aprobada por Alberto el
   09-10). Todo cuelga de .conv-ampliado--<sección>: la barra lateral no cambia. ── */
.conv-ampliado{--cg-lado:320px;--cg-espacio:22px;
  /* [11-10-2026 (4)] Agenda en grande: ancho mínimo de la tarjeta de un profesional y de un servicio dentro de ella. */
  --agv-tarjeta-min:280px;--agv-servicio-min:240px;
  /* [24-10-2026 (2)] Por día en grande: el ancho mínimo de un día de la tira. */
  --agv-dia-min:48px}

/* AGENDA [11-10-2026]: arriba «Ver» y los profesionales en una fila (con sus nombres), las próximas citas en
   tarjetas, y la vista a lo ancho: «Por servicio» con quién hace cada uno, «Por profesional» en dos columnas y
   «Por día» con un profesional por columna. Todo abierto (en la barra se pliega). */
.conv-ampliado--contactAgendaSection #contactAgendaContainer{display:flex;flex-direction:column;gap:14px}
.conv-ampliado--contactAgendaSection #contactAgendaContainer > .agenda-pending-banner{order:0;margin:0}
.conv-ampliado--contactAgendaSection .agv-barra{order:1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0}
.conv-ampliado--contactAgendaSection #agendaContactAppointments{order:2;margin:0;padding:0;border:0}
.conv-ampliado--contactAgendaSection #agendaContactAppointments:empty{display:none}
.conv-ampliado--contactAgendaSection #agendaVista{order:3}
.conv-ampliado--contactAgendaSection .agv-ver-t{display:inline}
.conv-ampliado--contactAgendaSection .agv-seg{flex:0 0 auto}
.conv-ampliado--contactAgendaSection .agv-seg-b{flex:0 0 auto;padding:5px 12px;font-size:11.5px;gap:6px}
.conv-ampliado--contactAgendaSection .agv-seg-b span{overflow:visible}
.conv-ampliado--contactAgendaSection .agv-l-largo{display:inline}
.conv-ampliado--contactAgendaSection .agv-l-corto{display:none}
.conv-ampliado--contactAgendaSection .agv-profs{flex-wrap:wrap;overflow:visible;padding:0}
.conv-ampliado--contactAgendaSection .agv-prof:not(.agv-prof--todos){padding:2px 10px 2px 2px}
.conv-ampliado--contactAgendaSection .agv-prof-n{display:inline}
.conv-ampliado--contactAgendaSection .agv-cuerpo{max-height:none;overflow:visible;padding-right:0}
.conv-ampliado--contactAgendaSection .agv-quien{display:inline}
.conv-ampliado--contactAgendaSection .agv-busca{max-width:320px}
.conv-ampliado--contactAgendaSection .agenda-next-slots-title{font-size:11px;margin-bottom:10px}
.conv-ampliado--contactAgendaSection .agenda-next-svc-name--toggle{padding:8px 12px;font-size:12.5px;border-radius:8px}
.conv-ampliado--contactAgendaSection .agenda-next-svc-chevron{margin-left:10px}
.conv-ampliado--contactAgendaSection .agenda-next-slots-row{gap:6px;padding:8px 0 2px 2px}
.conv-ampliado--contactAgendaSection .agenda-next-slot-pill{width:76px;padding:6px 6px 5px}
.conv-ampliado--contactAgendaSection .agenda-next-slot-time{font-size:13px}
.conv-ampliado--contactAgendaSection .agenda-specialists-wrapper{margin-left:10px;padding-left:12px}
.conv-ampliado--contactAgendaSection .agenda-specialists-wrapper.agv-uno{margin-left:0;padding-left:0}
.conv-ampliado--contactAgendaSection .agenda-cal-toggle{text-align:left}
/* Por profesional: tantas columnas como quepan (auto-fit: con pocos profesionales las tarjetas se ensanchan,
   no queda una columna vacía) y, dentro de cada tarjeta, los servicios en columnas si el ancho da. [11-10-2026 (4)] */
.conv-ampliado--contactAgendaSection .agv-prs{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--agv-tarjeta-min),1fr));gap:10px;align-items:start}
.conv-ampliado--contactAgendaSection .agv-pr{margin:0}
.conv-ampliado--contactAgendaSection .agv-pr .agv-pr-cuerpo,
.conv-ampliado--contactAgendaSection .agv-col .agv-col-cuerpo{display:block}
.conv-ampliado--contactAgendaSection .agv-pr-cab,
.conv-ampliado--contactAgendaSection .agv-col-cab{cursor:default;padding:9px 12px}
.conv-ampliado--contactAgendaSection .agv-pr-cab:hover,
.conv-ampliado--contactAgendaSection .agv-col-cab:hover{background:none}
.conv-ampliado--contactAgendaSection .agv-chev{display:none}
.conv-ampliado--contactAgendaSection .agv-pr-prox{font-size:10.5px}
.conv-ampliado--contactAgendaSection .agv-pr-prox--sub{display:none}
.conv-ampliado--contactAgendaSection .agv-pr-prox--lado{display:inline}
.conv-ampliado--contactAgendaSection .agv-pr-cuerpo,
.conv-ampliado--contactAgendaSection .agv-col-cuerpo{padding:2px 12px 12px}
/* [11-10-2026 (4)] En «Por profesional» cada servicio trae pocas horas: dentro de la tarjeta van en columnas
   cuando el ancho da (en «Por día» traen todas las del día y ocupan la fila entera). El servicio con el panel
   de reservar abierto ocupa todo el ancho. */
.conv-ampliado--contactAgendaSection .agv-pr .agv-pr-cuerpo{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--agv-servicio-min),1fr));gap:0 18px;align-items:start}
.conv-ampliado--contactAgendaSection .agv-pr .agv-svc{min-width:0}
.conv-ampliado--contactAgendaSection .agv-pr .agv-svc + .agv-svc{border-top:1px dashed #eef0f6}
.conv-ampliado--contactAgendaSection .agv-pr .agv-svc:has(.agenda-confirm-panel,#agendaReservationPanel),
.conv-ampliado--contactAgendaSection .agv-pr .agv-pr-cuerpo > :not(.agv-svc){grid-column:1 / -1}
.conv-ampliado--contactAgendaSection .agv-pr-t > b{font-size:13px}
/* Por día: la tira y los servicios a la vista; un profesional por columna */
/* [24-10-2026 (2)] La tira se reparte todo el ancho (antes, días de 48 px fijos pegados a la izquierda). */
.conv-ampliado--contactAgendaSection .agv-dia{flex:1 1 0;width:auto;min-width:var(--agv-dia-min);padding:4px 0}
.conv-ampliado--contactAgendaSection .agv-dia-cab{justify-content:flex-start}
.conv-ampliado--contactAgendaSection .agv-dia-cab .agv-dia-tit{flex:0 1 auto}
.conv-ampliado--contactAgendaSection .agv-tira-nav,
.conv-ampliado--contactAgendaSection .agv-tira-mes{height:28px;width:28px}
.conv-ampliado--contactAgendaSection .agv-mes{max-width:340px}
.conv-ampliado--contactAgendaSection .agv-chips{flex-wrap:wrap;overflow:visible}
.conv-ampliado--contactAgendaSection .agv-chip{font-size:11px;padding:3px 10px}
.conv-ampliado--contactAgendaSection .agv-cols{grid-template-columns:repeat(auto-fit,minmax(var(--agv-tarjeta-min),1fr));gap:10px}
.conv-ampliado--contactAgendaSection .agv-col .agenda-next-slot-pill{width:56px;padding:5px 3px}
.conv-ampliado--contactAgendaSection #contactAgendaContainer .agenda-calendar{margin:0}
.conv-ampliado--contactAgendaSection .agenda-appts-title{font-size:11px;font-weight:700;color:#9961FF;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.conv-ampliado--contactAgendaSection .agenda-appts-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.conv-ampliado--contactAgendaSection .agenda-appts-list .agenda-appt-item{margin:0;padding:8px 10px 8px 12px;border-radius:8px}
.conv-ampliado--contactAgendaSection .agenda-slot-btn{width:72px;padding:6px}
.conv-ampliado--contactAgendaSection .agenda-confirm-panel,
.conv-ampliado--contactAgendaSection .agotra{max-width:640px}
.conv-ampliado--contactAgendaSection .agenda-pending-banner{max-width:720px}
/* El resultado de reservar o de confirmar: centrado, sin estirarse */
.conv-ampliado--contactAgendaSection .agenda-reservation-success,
.conv-ampliado--contactAgendaSection #contactAgendaContainer > div[style*="f0fdf4"]{max-width:520px;width:100%;align-self:center}
/* Por noches (alojamiento): su columna de siempre, centrada (su calendario no se estira) */
.conv-ampliado--contactAgendaSection #contactAgendaContainer:has(> #agendaNightCal){display:block !important;max-width:560px;margin:0 auto}
/* [24-10-2026 (2)] Por día con el mes abierto: el mes a la izquierda y el día a la derecha (solo en el computador). */
@media (min-width:901px){
  .conv-ampliado--contactAgendaSection .agv-cuerpo--dia:has(> .agv-mes){display:grid;grid-template-columns:var(--cg-lado) minmax(0,1fr);column-gap:var(--cg-espacio);align-items:start}
  .conv-ampliado--contactAgendaSection .agv-cuerpo--dia:has(> .agv-mes) > *{grid-column:2;min-width:0}
  .conv-ampliado--contactAgendaSection .agv-cuerpo--dia > .agv-mes{grid-column:1;grid-row:1 / span 6;max-width:none}
}
@media (max-width:900px){   /* en el celular: una columna */
  .conv-ampliado--contactAgendaSection .agv-prs{grid-template-columns:minmax(0,1fr)}
  .conv-ampliado--contactAgendaSection .agv-cols{grid-template-columns:minmax(0,1fr)}
  .conv-ampliado--contactAgendaSection .agenda-appts-list{display:block}
  .conv-ampliado--contactAgendaSection .agenda-appts-list .agenda-appt-item{margin-bottom:6px}
}

/* CALENDARIO: arriba los filtros, todo a la vista; el mes a la izquierda y el día a la derecha. */
.conv-ampliado--contactCalendarSection .cal-filters-wrapper{padding:10px 14px}
.conv-ampliado--contactCalendarSection .cal-filter-section{display:flex;align-items:flex-start;gap:10px;margin:0;padding:4px 0}
.conv-ampliado--contactCalendarSection .cal-filter-section + .cal-filter-section{border-top:1px solid #f1f2f8}
.conv-ampliado--contactCalendarSection .cal-filter-section-header{flex:0 0 96px;padding-top:6px !important;pointer-events:none}
.conv-ampliado--contactCalendarSection .cal-filter-section-header i{display:none}
.conv-ampliado--contactCalendarSection .cal-filter-section > div:last-child{flex:1;min-width:0;padding:0 !important}
.conv-ampliado--contactCalendarSection .cal-filter-scroll{flex-direction:row;flex-wrap:wrap;max-height:none;overflow:visible;gap:5px;margin:0;padding:0}
.conv-ampliado--contactCalendarSection .cal-filter-row-btn{width:auto;padding:4px 11px;border-radius:999px}
.conv-ampliado--contactCalendarSection .cal-summary{margin:0}
.conv-ampliado--contactCalendarSection .cal-nav{padding:7px 14px}
.conv-ampliado--contactCalendarSection .cal-nav-title{font-size:14px}
.conv-ampliado--contactCalendarSection .cal-day-header{font-size:10.5px;padding:6px 0 4px}
.conv-ampliado--contactCalendarSection .cal-days-grid{gap:4px;padding:0 8px 8px}
.conv-ampliado--contactCalendarSection .cal-day{aspect-ratio:auto;height:58px;justify-content:flex-start;padding-top:7px}
.conv-ampliado--contactCalendarSection .cal-day-num{font-size:13px}
.conv-ampliado--contactCalendarSection .cal-dots{margin-top:6px;gap:3px}
.conv-ampliado--contactCalendarSection .cal-dot{width:6px;height:6px}
.conv-ampliado--contactCalendarSection .cal-legend{padding:0;gap:10px}
.conv-ampliado--contactCalendarSection .cal-legend-item{font-size:10px;gap:4px}
.conv-ampliado--contactCalendarSection .cal-day-panel-title{font-size:12.5px}
.conv-ampliado--contactCalendarSection .cal-appt-list{max-height:none;padding:8px 10px 10px;gap:6px}
.cal-dia-vacio{display:none}   /* el lugar del día sin elegir: solo en grande, en el computador */
/* [11-10-2026] «Ver» y los profesionales en una fila, con sus nombres; en el Mes, cuántas citas de cada uno;
   la Semana con los nombres y qué tan lleno está; el Día como grilla hora a hora; las cabañas con sus nombres. */
.conv-ampliado--contactCalendarSection .ccal-barra{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0}
.conv-ampliado--contactCalendarSection .ccal-ver-t{display:inline}
.conv-ampliado--contactCalendarSection .ccal-seg{flex:0 0 auto}
.conv-ampliado--contactCalendarSection .ccal-seg-b{padding:5px 12px;font-size:11.5px;gap:6px}
.conv-ampliado--contactCalendarSection .ccal-profs{flex-wrap:wrap;overflow:visible;padding:0}
.conv-ampliado--contactCalendarSection .ccal-prof:not(.ccal-prof--todos){padding:2px 10px 2px 2px}
.conv-ampliado--contactCalendarSection .ccal-prof-n{display:inline}
.conv-ampliado--contactCalendarSection .cal-dots{flex-wrap:wrap;padding:0 3px}
.conv-ampliado--contactCalendarSection .cal-dots .cal-dot{display:none}
.conv-ampliado--contactCalendarSection .cal-dots .ccal-num{display:inline-block;font-size:9px;font-weight:700;padding:0 4px;border-radius:999px;color:#fff;line-height:14px}
.conv-ampliado--contactCalendarSection .cal-legend .cal-dot{width:7px;height:7px}
.conv-ampliado--contactCalendarSection .ccal-sem-quien{width:190px}
.conv-ampliado--contactCalendarSection .ccal-quien-n{display:block}
.conv-ampliado--contactCalendarSection .ccal-sem td{height:46px}
.conv-ampliado--contactCalendarSection .ccal-n{font-size:13px}
.conv-ampliado--contactCalendarSection .ccal-lb{display:block}
.conv-ampliado--contactCalendarSection .ccal-nav b{font-size:13px}
.conv-ampliado--contactCalendarSection .ccal-nav button{width:30px;height:30px}
.conv-ampliado--contactCalendarSection .ccal-tab-fila{grid-template-columns:170px repeat(7,1fr)}
.conv-ampliado--contactCalendarSection .ccal-tab-celda{height:42px}
.conv-ampliado--contactCalendarSection .ccal-estadia{height:30px}
.conv-ampliado--contactCalendarSection .ccal-estadia-l{display:block}
.conv-ampliado--contactCalendarSection .ccal-estadia-c{display:none}
@media (min-width:901px){
  .conv-ampliado--contactCalendarSection #contactCalendarContainer{display:grid;grid-template-columns:minmax(0,1fr) var(--cg-lado);
    grid-template-rows:auto auto auto auto minmax(0,1fr);column-gap:var(--cg-espacio);row-gap:12px;align-items:start}
  .conv-ampliado--contactCalendarSection #contactCalendarContainer > *{grid-column:1 / -1;min-width:0}
  .conv-ampliado--contactCalendarSection .cal-filters-wrapper,
  .conv-ampliado--contactCalendarSection .cal-box,
  .conv-ampliado--contactCalendarSection .ccal-vista,
  .conv-ampliado--contactCalendarSection .cal-day-panel{margin:0}   /* en la grilla separa el row-gap */
  .conv-ampliado--contactCalendarSection #contactCalendarContainer > .ccal-barra{grid-row:1}
  .conv-ampliado--contactCalendarSection #contactCalendarContainer > .cal-filters-wrapper{grid-row:2}
  .conv-ampliado--contactCalendarSection #contactCalendarContainer > .cal-box{grid-column:1;grid-row:3}
  .conv-ampliado--contactCalendarSection #contactCalendarContainer > .cal-legend{grid-column:1;grid-row:4}
  .conv-ampliado--contactCalendarSection #contactCalendarContainer > .ccal-vista{grid-row:3 / 6}
  /* el día ocupa hasta la última fila (flexible): una lista larga no estira las filas del mes */
  .conv-ampliado--contactCalendarSection #contactCalendarContainer > .cal-day-panel,
  .conv-ampliado--contactCalendarSection #contactCalendarContainer > .cal-dia-vacio{grid-column:2;grid-row:3 / 6}
  .conv-ampliado--contactCalendarSection .ccal-rej{display:grid}
  .conv-ampliado--contactCalendarSection .ccal-dia-listas{display:none}
  .conv-ampliado--contactCalendarSection .cal-dia-vacio{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    text-align:center;min-height:220px;padding:20px;border:2px dashed #e4e1fb;border-radius:12px;color:#9a95c9;font-size:12px;background:#fcfbff}
  .conv-ampliado--contactCalendarSection .cal-dia-vacio i{font-size:22px;color:#c4b5fd}
  .conv-ampliado--contactCalendarSection .cal-dia-vacio span{max-width:190px;line-height:1.5}
}
@media (max-width:900px){   /* [11-10-2026] en el celular, la Semana y el tablero como en la barra (solo las caritas) */
  .conv-ampliado--contactCalendarSection .ccal-sem-quien{width:34px}
  .conv-ampliado--contactCalendarSection .ccal-quien-n,
  .conv-ampliado--contactCalendarSection .ccal-lb,
  .conv-ampliado--contactCalendarSection .ccal-estadia-l{display:none}
  .conv-ampliado--contactCalendarSection .ccal-estadia-c{display:block}
  .conv-ampliado--contactCalendarSection .ccal-tab-fila{grid-template-columns:30px repeat(7,1fr)}
}
@media (max-width:900px){   /* cada filtro en una fila que se desliza de lado; el mes con celdas más bajas */
  .conv-ampliado--contactCalendarSection .cal-day{height:46px;padding-top:5px}
  .conv-ampliado--contactCalendarSection .cal-filter-section-header{flex-basis:70px}
  .conv-ampliado--contactCalendarSection .cal-filter-scroll,
  .conv-ampliado--contactCalendarSection .cal-summary{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .conv-ampliado--contactCalendarSection .cal-filter-scroll::-webkit-scrollbar,
  .conv-ampliado--contactCalendarSection .cal-summary::-webkit-scrollbar{display:none}
  .conv-ampliado--contactCalendarSection .cal-filter-btn,
  .conv-ampliado--contactCalendarSection .cal-filter-row-btn{flex-shrink:0}
}

/* EMBUDOS: cada embudo como tarjeta blanca, como Notas (sus colores van en línea: por eso los !important) */
.conv-ampliado--funnelsSection .funnel-block{background:#fff;border:1px solid #e8eaf3;border-radius:12px;padding:0;margin-bottom:10px;overflow:hidden}
.conv-ampliado--funnelsSection .funnel-block-title{background:transparent !important;border:0 !important;border-radius:0 !important;padding:11px 14px;font-size:12.5px;color:#1E2A5E}
.conv-ampliado--funnelsSection .funnel-block-title--toggle:hover{background:#f8f7ff !important}
.conv-ampliado--funnelsSection .funnel-dot{width:8px;height:8px}
.conv-ampliado--funnelsSection .funnel-stages-box{border:0;border-top:1px solid #f1f2f8;border-radius:0;margin:0;padding:10px 14px 12px}
.conv-ampliado--funnelsSection .funnel-stages{gap:6px}
.conv-ampliado--funnelsSection .funnel-stage-btn{height:26px;padding:0 12px;font-size:11.5px;border-radius:13px}
.conv-ampliado--funnelsSection .funnel-updated-at{margin-top:8px;color:#b8bccb}
.conv-ampliado--funnelsSection .funnel-separator{display:none}

/* ══ [11-10-2026] LA PRÓXIMA CITA JUNTO AL NOMBRE (conv-proxima.js) ══════════════════════
   Sin fondo, como el ticket que reemplaza. La forma dice qué es (hora, estadía, taller); el color, cómo está. */
.conv-prox-slot{display:inline-flex;flex-shrink:0}
.conv-prox-slot:empty{display:none}
.conv-prox{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;
  font-size:10px;cursor:pointer;border-radius:4px;transition:transform .12s}
.conv-prox:hover,.conv-prox:focus-visible{transform:scale(1.18);outline:none}
.conv-prox:focus-visible{box-shadow:0 0 0 2px rgba(153,97,255,.35)}
.conv-prox--ok{color:#059669}
.conv-prox--pago{color:#d97706}
.conv-prox--hoy{color:#9961FF}
/* Su globo: título con el ícono, las líneas, lo pagado, cuántas más y el pie. */
.hvy-tip .conv-prox-tit{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#1e2d5a;margin-bottom:6px}
.hvy-tip .conv-prox-tit i{font-size:11px}
.hvy-tip .conv-prox-lin{font-size:11.5px;color:#4b5563;line-height:1.5}
.hvy-tip .conv-prox-saldo{font-size:11.5px;color:#1e2d5a;font-weight:600;margin-top:4px}
.hvy-tip .conv-prox-mas{font-size:11px;color:#9ca3af;margin-top:4px}
.hvy-tip .conv-prox-pie{margin-top:8px;padding-top:7px;border-top:1px solid #f1eefb;font-size:10.5px;color:#9961FF;font-weight:600}

/* [11-10-2026 (3)] Quien se registró desde «Nueva hora» y todavía no escribe (conv-render.js [v2026.10.11-2]). */
.conv-sin-escribir { color:#b8bccb; font-style:italic; }


/* ── [22-10-2026] La barra de escribir en el celular: el «+» y el menú vertical ───────────────────────── */
.conv-mas { display: none; }
.conv-herr { display: contents; }          /* en el computador, como si el envoltorio no existiera */

@media (max-width: 900px) {
  #convComposer { position: relative; min-width: 0; max-width: 100%; overflow: visible; }
  .conv-mas {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 34px; height: 34px; border-radius: 9999px; border: 0;
    background: #f3f4f6; color: #374151; font-size: 15px; cursor: pointer;
    transition: background .15s;
  }
  .conv-mas[aria-expanded="true"] { background: #faf5ff; color: #9333ea; }
  .conv-herr {
    display: none; position: absolute; left: 4px; bottom: calc(100% + 8px); z-index: 40;
    flex-direction: column; gap: 2px; padding: 6px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 16px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .16);
  }
  .conv-herr.abierta { display: flex; animation: conv-herr-sube .16s ease-out; }
  @keyframes conv-herr-sube { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .conv-herr > button {
    width: 44px; height: 44px; padding: 0; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
  }
  .conv-herr > button i { font-size: 19px; }
  .conv-herr > button:active { background: #f3f4f6; }
  /* el globo de cada herramienta, a la derecha del ícono (abajo taparía al siguiente) */
  .conv-herr > [data-tooltip]::before {
    top: 50%; left: calc(100% + 10px); bottom: auto; transform: translateY(-50%); white-space: nowrap;
  }
  .conv-herr > [data-tooltip]::after { display: none !important; }
}

/* ═══ [23-10-2026] EL ENCABEZADO COMO TARJETA Y LA LISTA SOBRE EL GRIS (opción B) ═══════════════
   Acotado a #convLeftPanel.hv-panel. Las conversaciones toman los valores del editor (hv-tarjeta.css)
   hasta que llegue la tarjeta común. */
/* [23-10-2026 (2)] La tarjeta parte en el borde de arriba y su fila mide lo que la cabecera del chat (48px). */
/* [24-10-2026] Encima del panel del chat, para que su sombra se vea (como la del panel del contacto). */
#convLeftPanel.hv-panel { --conv-izq-capa: 2; position: relative; z-index: var(--conv-izq-capa); }
#convLeftPanel.hv-panel .hv-cabecera.conv-cab { margin: 0 var(--hv-sep) var(--hv-sep); padding: 0 8px; }
.conv-cab-fila.hv-titulo { gap: 4px; }   /* [27-10-2026] 4px (eran 6): así cabe «Conversaciones» entero junto a su «?» y sus botones */
.conv-cab-fila .hv-titulo-ico { margin-right: 2px; }   /* el ícono guarda sus 6px */
/* [23-10-2026 (5)] En celular, sin los 8px de aire de toda página (styles.css): pegado arriba como Seguimiento. */
@media (max-width: 768px) {
  #convWrapper { margin: -8px; width: calc(100% + 16px); height: calc(100% + 16px); }
}
#convLeftPanel.hv-panel #advancedFiltersPanel:not(.hidden) { padding-bottom: 10px; }
#convLeftPanel.hv-panel #conversationsList { background: transparent; padding: 0 8px 8px; }
/* [23-10-2026 (4)] La conversación es una .hv-card (hv-tarjeta.css); acá solo lo propio de Conversaciones. */
.conv-tags-puntos { display: inline-flex; gap: 3px; align-items: center; }
/* [24-10-2026] La derecha de la tarjeta de la lista (opción 2 de Alberto): a la izquierda la hora y, debajo, la próxima
   cita, los tags y el punto de urgencia en una fila; a la derecha, solos y centrados, los sin leer. */
.conversation-item .hv-der { flex-direction: row; align-items: center; gap: 8px; }
.conv-der-col { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.conv-der-fila { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; }
.conversation-item .hv-noleidos { min-width: 22px; height: 22px; border-radius: 11px; font-size: 10.5px; }
.conv-tag-punto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.hv-card .conv-punto-urg { width: 8px; height: 8px; }
.hv-card .conv-visitante-borra { margin-top: 0; }
#convLeftPanel.hv-panel .conv-aviso-visitantes { margin: 0 8px 8px; }

/* ═══ [23-10-2026 (6)] RESPUESTAS RÁPIDAS CON ARCHIVO ════════════════════════════════════════════
   La fila del archivo del formulario (también es donde se abre la grabadora: hvy-grabador.js la usa
   de anfitriona y esconde sus hijos mientras graba), el archivo elegido y el de cada respuesta. */
.qr-adj-fila { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; min-height: 30px; }
.qr-adj-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px;
  border: 1px solid #ddd6fe; background: #f5f0ff; color: #7c3aed; font-size: 11px; font-weight: 600; cursor: pointer;
  transition: background .15s; }
.qr-adj-btn:hover { background: #ede4ff; }
.qr-adj-btn i { font-size: 11px; }
.qr-adj-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 6px 4px 10px;
  border-radius: 8px; background: #fff; border: 1px solid #e5e7eb; font-size: 11px; color: #374151; min-width: 0; }
.qr-adj-chip > i { color: #7c3aed; font-size: 11px; }
.qr-adj-chip .qr-adj-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.qr-adj-chip em, .qr-adj-item em { font-style: normal; color: #9ca3af; font-size: 10px; flex-shrink: 0; }
.qr-adj-chip button { border: none; background: none; color: #9ca3af; cursor: pointer; padding: 0 4px; font-size: 11px; }
.qr-adj-chip button:hover { color: #dc2626; }
.qr-adj-item { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; max-width: 100%;
  padding: 3px 8px; border-radius: 8px; background: #f5f0ff; color: #6d28d9; font-size: 11px; font-weight: 600; min-width: 0; }
.qr-adj-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El panel, encima de la vista previa y del aviso de entrega (comparten contenedor con la barra). */
#quickRepliesPanel { bottom: calc(100% + 8px); max-height: calc(100dvh - 200px); overflow-y: auto; }

/* ═══ [23-10-2026 (7)] EL FORMULARIO EN PASOS ════════════════════════════════════════════════════════ */
.qr-paso { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; }
.qr-paso + .qr-paso { border-top: 1px dashed #e5e7eb; }
.qr-paso-n { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #ede9fe; color: #7c3aed; font-size: 11px; font-weight: 800; transition: background .15s, color .15s; }
.qr-paso.hecho .qr-paso-n { background: #16a34a; color: #fff; }
.qr-paso-n i { font-size: 10px; }
.qr-paso-cuerpo { flex: 1; min-width: 0; }
.qr-paso-tit { font-size: 12px; font-weight: 700; color: #374151; margin-bottom: 5px; }
.qr-paso-tit span { font-weight: 500; color: #9ca3af; font-size: 11px; margin-left: 4px; }
.qr-paso .qr-adj-fila { margin-top: 0; }
.qr-guia { background: #fff; border: 1px solid #ddd6fe; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
  font-size: 11.5px; color: #4b5563; }
.qr-guia-tit { font-weight: 700; color: #6d28d9; margin-bottom: 6px; font-size: 12px; }
.qr-guia-tit i { color: #f59e0b; margin-right: 4px; }
.qr-guia ol { margin: 0 0 8px 18px; padding: 0; list-style: decimal; }
.qr-guia li { margin: 3px 0; line-height: 1.4; }
.qr-guia code { background: #f5f0ff; color: #7c3aed; padding: 0 4px; border-radius: 4px; font-size: 11px; }
.qr-guia-ok { border: none; background: #7c3aed; color: #fff; border-radius: 8px; padding: 4px 12px; font-size: 11px;
  font-weight: 600; cursor: pointer; }
.qr-form-pie { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 6px;
  padding-top: 8px; border-top: 1px solid #ececf2; }
.qr-falta { font-size: 11px; color: #b45309; margin-top: 2px; line-height: 1.35; }
.qr-falta.listo { color: #16a34a; }
#qrFormSaveBtn:disabled { opacity: .45; cursor: not-allowed; }
.qr-adj-oir { width: 22px; height: 22px; border-radius: 50%; border: none; background: #7c3aed !important; color: #fff !important;
  display: inline-flex; align-items: center; justify-content: center; font-size: 9px !important; padding: 0 !important; cursor: pointer; }

/* ═══ [23-10-2026 (8)] LA VISTA PREVIA DEL ADJUNTO, COMPACTA ═══════════════════════════════════════════ */
.conv-adj-caja { display: flex; align-items: stretch; gap: 6px; margin-bottom: 6px; max-width: 420px;
  background: var(--hv-fondo, #fff); border: var(--hv-borde, 0.5px solid rgba(166,166,166,.23));
  border-radius: var(--hv-radio, 10px); box-shadow: var(--hv-sombra, 0 2px 11px rgba(153,97,255,.10)); padding: 6px 6px 6px 8px; }
.conv-adj-caja.hidden { display: none; }
.conv-adj-cont { flex: 1; min-width: 0; }
.conv-adj { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* [25-10-2026] Varios archivos: una fila por archivo, con su ✕; arriba cuántos y «Sacar todos». */
.conv-adj-lista { display: flex; flex-direction: column; gap: 4px; max-height: var(--conv-adj-lista-max, 168px); overflow-y: auto; }
.conv-adj-lista .conv-adj .conv-adj-txt { flex: 1; }
.conv-adj-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: #6b7280;
  padding: 0 2px 4px; margin-bottom: 4px; border-bottom: 1px solid #f1f1f5; }
.conv-adj-todos { border: none; background: none; color: #7c3aed; font-size: 11px; font-weight: 600; cursor: pointer; padding: 0; }
.conv-adj-todos:hover { color: #dc2626; }
.qr-adj-lista { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
.qr-adj-cuenta { font-size: 10.5px; color: #6b7280; }
.conv-adj-ico { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: inline-flex;
  align-items: center; justify-content: center; font-size: 13px; background: #f3f4f6; color: #6b7280; }
.conv-adj-ico--audio { background: #ecfdf5; color: #16a34a; }
.conv-adj-ico--video { background: #f5f0ff; color: #7c3aed; }
.conv-adj-ico--image { background: #eff6ff; color: #2563eb; }
.conv-adj-ico--pdf   { background: #fef2f2; color: #dc2626; }
.conv-adj-ico--word  { background: #eff6ff; color: #2563eb; }
.conv-adj-ico--excel { background: #ecfdf5; color: #16a34a; }
.conv-adj-mini { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.conv-adj-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.conv-adj-nombre { font-size: 12.5px; font-weight: 600; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-adj-detalle { font-size: 11px; color: #9ca3af; }
.conv-adj-oir { width: 26px; height: 26px; border-radius: 50%; border: none; flex-shrink: 0; cursor: pointer;
  background: #7c3aed; color: #fff; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; }
.conv-adj-oir:hover { background: #6d28d9; }
.conv-adj-quitar { width: 26px; height: 26px; border-radius: 50%; border: none; background: none; color: #9ca3af;
  cursor: pointer; flex-shrink: 0; font-size: 12px; }
.conv-adj-quitar:hover { background: #f3f4f6; color: #dc2626; }

/* ═══ [23-10-2026 (9)] MENSAJES ELIMINADOS ═══════════════════════════════════════════════════════════ */
.conv-elim { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-style: italic; color: #6b7280; }
.conv-elim i { color: #9ca3af; font-size: 12px; }
.conv-elim em { font-style: normal; color: #9ca3af; font-size: 11px; margin-left: 4px; }
.conv-elim-orig { margin-top: 4px; font-size: 12px; color: #9ca3af; text-decoration: line-through;
  white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.conv-elim-btn { align-self: center; width: 26px; height: 26px; border-radius: 50%; border: none; background: transparent;
  color: #9ca3af; cursor: pointer; font-size: 12px; opacity: 0; transition: opacity .15s, background .15s, color .15s; flex-shrink: 0; }
.conv-fila-env:hover .conv-elim-btn, .conv-elim-btn:focus-visible { opacity: 1; }
.conv-elim-btn:hover { background: #fef2f2; color: #dc2626; }
.conv-elim-btn.hvy-bloqueado { opacity: .6; }
@media (pointer: coarse) { .conv-elim-btn { opacity: .5; } }

/* ── [23-10-2026 (11)] EL PANEL DEL CONTACTO CON EL LOOK DE LA LISTA ──
   Sobre el gris (.hv-panel), la ficha y cada grupo son tarjetas con los valores de hv-tarjeta.css. */
.rp-tarjetas { --rp-g-alto: 40px;            /* la cabecera de un grupo */
               --rp-g-ico-tam: 24px;         /* el cuadrito del ícono */
               --rp-g-letra: 12.5px;         /* [23-10 (12)] el título del grupo, más grande que el de adentro */
               --rp-fila-letra: 11px;        /* [23-10 (12)] los títulos de adentro (Embudos, Tags…) */
               --rp-fila-alto: 34px;         /* [23-10 (13)] la cabecera de adentro, más baja que la del grupo */
               --rp-fila-ico-tam: 20px;
               --rp-fila-hover: var(--hv-hover-fondo); }
.rp-tarjetas .rp-grupo { margin: 0 var(--hv-sep) var(--hv-sep); background: var(--hv-fondo); border: var(--hv-borde);
  border-radius: var(--hv-radio); box-shadow: var(--hv-sombra); overflow: hidden; flex-shrink: 0; }
.rp-tarjetas .rp-grupo:empty { display: none; }                      /* IA · Toggles sin contacto */
.rp-tarjetas > .hv-cabecera { flex-shrink: 0; }
.rp-g-cab { width: 100%; height: var(--rp-g-alto); display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 0 12px; background: transparent; border: 0; cursor: pointer; font-family: 'DM Sans', sans-serif; }
.rp-g-cab:hover { background: var(--rp-fila-hover); }
.rp-g-izq { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rp-g-ico { width: var(--rp-g-ico-tam); height: var(--rp-g-ico-tam); border-radius: var(--hv-titulo-ico-radio);
  background: var(--hv-titulo-ico-fondo); color: var(--hv-titulo-ico-color); display: inline-flex; align-items: center;
  justify-content: center; flex-shrink: 0; }
.rp-g-ico i { font-size: 11.5px; line-height: 1; }
.rp-g-txt { font-size: var(--rp-g-letra); font-weight: 700; color: var(--hv-titulo-color); text-transform: uppercase;
  letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-g-chev { font-size: 10px; color: #9ca3af; }
/* Abierto, una línea suave separa la cabecera de las filas. */
.rp-g-cab:has(+ .rp-open) { border-bottom: 1px solid #f0edfa; }
/* Las filas de adentro: el hover de las tarjetas y sin la línea de la última. */
.rp-tarjetas .rp-grupo [role="button"].hover\:bg-\[\#dce8ff\]:hover,
.rp-tarjetas .rp-grupo .hover\:bg-\[\#dce8ff\]:hover { background: var(--rp-fila-hover); }
.rp-tarjetas .rp-grupo > .rp-section > .border-b:last-child { border-bottom: 0; }
.rp-tarjetas .rp-grupo > .rp-section > .border-b { border-color: #f1f2f6; }

/* [23-10-2026 (12)] Lo abierto toma el color de la tarjeta abierta de la lista. */
.rp-tarjetas .rp-g-cab:has(+ .rp-open) { background: var(--hv-abierta-fondo); }   /* [23-10 (13)] solo los grupos */
/* [23-10-2026 (12)] Los títulos de adentro, más chicos que el del grupo. */
.rp-tarjetas .rp-grupo > .rp-section > .border-b > div:first-child span.uppercase { font-size: var(--rp-fila-letra); letter-spacing: .04em; }
/* [23-10-2026 (13)] Las cabeceras de adentro, más bajas que la del grupo. */
.rp-tarjetas .rp-grupo > .rp-section > .border-b > div:first-child { height: var(--rp-fila-alto); padding-top: 0; padding-bottom: 0; }
.rp-tarjetas .rp-grupo > .rp-section > .border-b > div:first-child > div:first-child > div:first-child { width: var(--rp-fila-ico-tam); height: var(--rp-fila-ico-tam); }
.rp-tarjetas .rp-grupo > .rp-section > .border-b > div:first-child i.text-\[13px\] { font-size: 12px; }

/* [23-10-2026 (14)] Las notas del panel, con la letra del resto del panel. */
.conv-nota-txt  { font-size: 12px; line-height: 1.45; color: #1f2937; margin: 0; white-space: pre-wrap; word-break: break-word; }
.conv-nota-meta { font-size: 10.5px; color: #9ca3af; margin: 3px 0 0; }

/* [28-10-2026] El aviso del sistema en el chat (showSystemBubble, conv-render.js): uno solo, con ✕ para cerrarlo. */
.conv-aviso-sis-c { display: inline-flex; align-items: center; gap: 6px; background: #fefce8; border: 1px solid #fde68a; color: #854d0e;
  font-size: 12px; padding: 5px 6px 5px 14px; border-radius: 999px; box-shadow: 0 1px 4px rgba(0,0,0,.08); max-width: 90%; }
.conv-aviso-sis-x { width: 22px; height: 22px; border-radius: 50%; border: 0; background: transparent; color: #a16207; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.conv-aviso-sis-x:hover, .conv-aviso-sis-x:focus-visible { background: #fef3c7; outline: none; }