/* ── BITÁCORA ──
   [v2026.10.27-1] hv-tarjeta.css
   2026-10-27 | .hv-btn-plegar (el botón de filtros de Conversaciones y Seguimiento) solo con su ícono, sin el chevron
     (Alberto, 27-10: «Filtro sin flechita»), para que el título quepa entero con el «?» de la ayuda. Abierto (.abierto)
     queda con el fondo del hover y un borde un poco más marcado; − las reglas del chevron (i).
   [v2026.10.23-5] hv-tarjeta.css
   2026-10-23 (5) | La segunda línea de la tarjeta (.hv-linea: el último mensaje en Conversaciones, las sesiones en
     Seguimiento, el lugar en Embudos) un poco más intensa (Alberto, 23-10: «cuesta verlo entre tantos… como el
     del número»): --hv-linea-color = #6b7280, el gris del número de la cabecera del chat (text-gray-500).
   [v2026.10.23-4] hv-tarjeta.css
   2026-10-23 (4) | + .hv-btn-plegar: el botón chico de plegar filtros (ícono + chevron, con globo) que nació en
     Conversaciones (.conv-filtros-btn), ahora común para Seguimiento. + .hv-cabecera.plena: la cabecera
     pegada arriba y de borde a borde (sin margen a los lados; solo redondea abajo): la cabecera del chat y la
     de la ficha de Seguimiento (Alberto, 23-10: redondeadas como las tarjetas, sin desplazarse).
   [v2026.10.23-3] hv-tarjeta.css
   2026-10-23 (3) | + .hv-canal.panel: la insignia de «Registrado en el panel» (Conversaciones, sin canal de
     entrada: lo anotó alguien del equipo), con el color de esa fuente. + .hv-der .hv-punto con aire. Entra
     Conversaciones con la tarjeta única (conv-render.js [v2026.10.23-1]).
   [v2026.10.23-2] hv-tarjeta.css
   2026-10-23 (2) | EL TÍTULO DEL MÓDULO, UNO SOLO (Alberto, 23-10: «todos están de diferente manera, hay que
     unificar estilos»): .hv-titulo (la fila, de --hv-titulo-alto = 48px, la altura de la cabecera del chat),
     .hv-titulo-ico (el cuadrito del ícono: 30px, lila suave, ícono lila) y .hv-titulo-txt (DM Sans 14 negrita).
     Lo usan Conversaciones, Seguimiento y Embudos; sus valores son variables, por si se quieren afinar.
     + .hv-cabecera.pegada: la cabecera-tarjeta que parte en el borde de arriba (sin margen superior,
     esquinas redondeadas solo abajo), a la altura de la cabecera de al lado (Conversaciones, Seguimiento).
     + .hv-btn-filtros: el botón «Filtros» de la barra (el de Calendario), para que Embudos lo use igual.
   [v2026.10.23-1] hv-tarjeta.css
   2026-10-23 | LOS VALORES DEFINITIVOS DEL EDITOR (Alberto, 23-10: «las css que se usarán
     definitivamente»): radio 10, borde gris 0.5px al 23%, sombra lila suave; hover azulado con
     sombra gris; abierta azul-lila (#ccd2ff) con sombra gris larga; fondo de lista #f7f7f7.
     · La opción B (el encabezado como tarjeta, .hv-cabecera / .hv-panel) la aprobó Alberto el 23-10
       sobre el demo real; entra a producción módulo por módulo. + .hv-cabecera.ancha para las barras
       de arriba (Embudos, Calendario).
     + .hv-flotante: un panel que flota sobre el contenido (los filtros del Calendario). Con el look
       de la tarjeta NORMAL —blanca— y no el de la abierta (Alberto, 23-10: «de aparecer como tarjeta
       no más, no con el fondo celeste»); solo suma una sombra (--hv-flotante-sombra) porque flota.
   [v2026.10.22-2] hv-tarjeta.css
   2026-10-22 (2) | + .hv-cabecera (DEMO de la opción B, Alberto 22-10): el encabezado de un panel (título,
     buscador, filtros) como una tarjeta más, con las mismas variables que la tarjeta: fondo, borde,
     radio y sombra. El panel entero va sobre el gris de la lista (.hv-panel). Lo usan Seguimiento,
     Conversaciones, Embudos y la barra del Calendario.
   [v2026.10.22-1] hv-tarjeta.css
   2026-10-22 | ARCHIVO NUEVO. LA TARJETA DE CONTACTO ÚNICA (Alberto, 22-10: «las cards de los
     contactos son diferentes en cada módulo; deberían ser iguales»). La misma tarjeta en
     Conversaciones, Seguimiento y Embudos: avatar con iniciales (o la foto), el canal como
     insignia, el nombre, una segunda línea, lo de la derecha y los chips. Lo que CAMBIA por
     módulo es el contenido de la línea, la derecha y los chips (hv-tarjeta.js lo arma); lo
     que NO cambia es esta cáscara. Base: la .emb-card de Embudos, que fue la que eligió.
     · Los valores de abajo (--hv-*) son LOS DEL EDITOR de tarjetas que armó Alberto
       (editor-tarjetas.html, 22-10): cada variable dice a qué control corresponde. Para
       cambiar el look se cambian AQUÍ y en ningún otro lado.
     · Tres estados: normal, al pasar el mouse (.hv-card:hover) y ABIERTA (.hv-card.abierta:
       la conversación o la ficha que está en pantalla). MARCADA (.hv-card.marcada) es la de
       Embudos elegida para una acción masiva: el mismo look de abierta más el tilde
       (.hv-check), sin el anillo violeta de antes (Alberto, 22-10).
     · En celular (pointer: coarse) no hay hover y la tarjeta no se levanta.
   Entra con Seguimiento (seg-empresa.js [v2026.10.22-1]); Conversaciones y Embudos después. */

/* ═══ LOS VALORES DEL EDITOR (control del editor → variable) ═══════════════════════════ */
:root {
  /* Separación y forma */
  --hv-sep:              8px;                       /* Separación */
  --hv-radio:            10px;                      /* Radio esquinas */
  --hv-lista-fondo:      #f7f7f7;                   /* Fondo de la lista */
  /* Tarjeta sin seleccionar */
  --hv-fondo:            rgba(255,255,255,1.00);    /* Fondo + transparencia */
  --hv-borde:            0.5px solid rgba(166,166,166,0.23);  /* Borde: grosor, color, transparencia */
  --hv-sombra:           0px 2px 11px 0px rgba(153,97,255,0.10); /* Sombra: X, Y, blur, extensión, color, transparencia */
  /* Al pasar el mouse */
  --hv-hover-levanta:    -1px;                      /* Levanta (en negativo: sube) */
  --hv-hover-fondo:      rgba(240,244,255,1.00);    /* Fondo + transparencia */
  --hv-hover-borde:      rgba(159,101,230,0.08);    /* Borde color + transparencia */
  --hv-hover-sombra:     0px 2px 11px 0px rgba(99,99,99,0.20); /* Sombra Y/blur extra ya sumados, color, transparencia */
  /* Tarjeta seleccionada (abierta, y marcada en Embudos) */
  --hv-abierta-fondo:    rgba(204,210,255,1.00);    /* Fondo + transparencia */
  --hv-abierta-borde:    0.5px solid rgba(200,97,255,0.26);     /* Borde grosor, color, transparencia */
  --hv-abierta-sombra:   0 20px 14px 0 rgba(176,176,176,0.14);  /* Sombra Y, blur, color, transparencia */
  --hv-abierta-barra:    0px;                       /* Barra izquierda */
  --hv-abierta-barra-color: #9961FF;
  /* Lo que flota sobre el contenido (no está en el editor): una sombra más, porque está despegado */
  --hv-flotante-sombra:  0 12px 28px rgba(30,42,94,0.14);

  /* El título del módulo (23-10): la fila, el cuadrito del ícono y el texto */
  --hv-titulo-alto:      48px;                      /* la altura de la cabecera del chat */
  --hv-titulo-ico-tam:   30px;                      /* el cuadrito del ícono */
  --hv-titulo-ico-radio: 8px;
  --hv-titulo-ico-fondo: #EEE9FF;
  --hv-titulo-ico-color: #9961FF;
  --hv-titulo-ico-letra: 14px;                      /* el tamaño del ícono */
  --hv-titulo-letra:     14px;
  --hv-titulo-peso:      600;                       /* el grosor del texto (600: cabe «Conversaciones» en su panel) */
  --hv-titulo-color:     #374151;
  --hv-linea-color:      #6b7280;                   /* la segunda línea de la tarjeta (23-10 (5)): el gris del número del chat */

  /* Lo que no está en el editor: colores de la casa */
  --hv-lila:             #9961FF;
  --hv-tinta:            #383838;
  --hv-avatar:           linear-gradient(135deg, #8e84fa 0%, #91c0ff 55%);
}

/* ═══ LA LISTA ═══════════════════════════════════════════════════════════════════════════ */
.hv-lista { background: var(--hv-lista-fondo); }

/* ═══ EL ENCABEZADO COMO TARJETA (opción B) ══════════════════════════════════════════════ */
/* Lo que va arriba de una lista o de un tablero (título, buscador, filtros, chips) dentro de una
   tarjeta con las mismas variables, sobre el fondo gris. Cada módulo pone adentro lo suyo. */
.hv-cabecera {
  margin: var(--hv-sep);
  background: var(--hv-fondo);
  border: var(--hv-borde);
  border-radius: var(--hv-radio);
  box-shadow: var(--hv-sombra);
  flex-shrink: 0;
}
.hv-cabecera.ancha { margin: var(--hv-sep) 10px 6px; }   /* las barras de arriba (Embudos, Calendario) */
/* [23-10 (2)] La cabecera que parte en el borde de arriba, a la altura de la cabecera de al lado. */
.hv-cabecera.pegada { margin-top: 0; border-top: none; border-radius: 0 0 var(--hv-radio) var(--hv-radio); }
.hv-cabecera.plena  { margin: 0 0 var(--hv-sep); border-top: none; border-left: none; border-right: none;
  border-radius: 0 0 var(--hv-radio) var(--hv-radio); }
/* [23-10 (4)] El botón de plegar los filtros del panel (globo «Filtros»). [27-10] Solo el ícono, sin chevron: abierto
   (.abierto) queda con el fondo del hover y un borde un poco más marcado. */
.hv-btn-plegar { display: inline-flex; align-items: center; gap: 5px; padding: 4px 5px; border-radius: 8px;
  background: #eff4fe; border: 0.5px solid #d0dcf5; color: #6B7AB5; cursor: pointer; flex-shrink: 0; font-size: 9px;
  transition: background .15s, border-color .15s; }
.hv-btn-plegar:hover, .hv-btn-plegar.abierto { background: #e4ebfd; }
.hv-btn-plegar.abierto { border-color: #b9c9f0; }
.hv-btn-plegar svg { display: block; }
/* [23-10 (2)] El título del módulo: ícono en su cuadrito + texto, en una fila de la altura de la cabecera
   del chat. Cada módulo suma a la derecha lo suyo (botones, conmutadores). */
.hv-titulo { display: flex; align-items: center; gap: 8px; height: var(--hv-titulo-alto); min-width: 0; }
.hv-titulo-ico { width: var(--hv-titulo-ico-tam); height: var(--hv-titulo-ico-tam); border-radius: var(--hv-titulo-ico-radio);
  background: var(--hv-titulo-ico-fondo); color: var(--hv-titulo-ico-color); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; }
.hv-titulo-ico i { font-size: var(--hv-titulo-ico-letra); line-height: 1; color: inherit; }
.hv-titulo-txt { font-family: 'DM Sans', sans-serif; font-size: var(--hv-titulo-letra); font-weight: var(--hv-titulo-peso); line-height: 1.2;
  color: var(--hv-titulo-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; margin: 0; }
/* [23-10 (2)] El botón «Filtros» de una barra (abre un panel flotante .hv-flotante): lila suave, y lila lleno
   cuando hay algo filtrando (.con-filtros). .hv-btn-filtros-n lleva el nombre de lo filtrado. */
.hv-btn-filtros { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid rgba(153,97,255,.45); background: #f5f0ff; color: var(--hv-lila); font-family: 'DM Sans', sans-serif;
  font-size: 12px; font-weight: 600; cursor: pointer; flex-shrink: 0; transition: background .15s, color .15s; }
.hv-btn-filtros:hover { background: #efe6ff; }
.hv-btn-filtros.con-filtros { background: var(--hv-lila); color: #fff; border-color: var(--hv-lila); }
.hv-btn-filtros-n { display: none; background: #fff; color: var(--hv-lila); border-radius: 9px; padding: 2px 8px;
  font-size: 10.5px; font-weight: 700; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-btn-filtros.con-filtros .hv-btn-filtros-n { display: inline-block; background: rgba(255,255,255,.25); color: #fff; }
/* El panel completo (encabezado + lista) sobre el gris; el encabezado es una tarjeta más. */
.hv-panel { background: var(--hv-lista-fondo) !important; }
/* Un panel que flota sobre el contenido (los filtros del Calendario): el look de la tarjeta normal, con
   una sombra más porque está despegado. */
.hv-flotante {
  background: var(--hv-fondo);
  border: var(--hv-borde);
  border-radius: var(--hv-radio);
  box-shadow: var(--hv-sombra), var(--hv-flotante-sombra);
}

/* ═══ LA TARJETA ═════════════════════════════════════════════════════════════════════════ */
.hv-card {
  background: var(--hv-fondo);
  border: var(--hv-borde);
  border-radius: var(--hv-radio);
  box-shadow: var(--hv-sombra);
  padding: 12px 12px 10px;
  position: relative;
  cursor: pointer;
  transition: box-shadow .2s, transform .15s, background-color .15s;
  user-select: none;
}
.hv-card + .hv-card { margin-top: var(--hv-sep); }
.hv-card:hover {
  transform: translateY(var(--hv-hover-levanta));
  background: var(--hv-hover-fondo);
  border-color: var(--hv-hover-borde);
  box-shadow: var(--hv-hover-sombra);
}
/* Abierta (la que está en pantalla) y marcada (Embudos, para una acción): el mismo look. */
.hv-card.abierta, .hv-card.marcada,
.hv-card.abierta:hover, .hv-card.marcada:hover {
  background: var(--hv-abierta-fondo);
  border: var(--hv-abierta-borde);
  box-shadow: var(--hv-abierta-sombra);
}
.hv-card.abierta::before, .hv-card.marcada::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: var(--hv-abierta-barra); border-radius: 0 3px 3px 0;
  background: var(--hv-abierta-barra-color);
}
/* En celular no hay mouse: nada se levanta ni cambia al tocar de pasada. */
@media (pointer: coarse) {
  .hv-card:hover { transform: none; background: var(--hv-fondo); border: var(--hv-borde); box-shadow: var(--hv-sombra); }
  .hv-card.abierta:hover, .hv-card.marcada:hover { background: var(--hv-abierta-fondo); border: var(--hv-abierta-borde); box-shadow: var(--hv-abierta-sombra); }
}

/* El tilde de la marcada (Embudos): el mismo círculo lila de siempre, en la esquina. */
.hv-check {
  position: absolute; top: 6px; left: 8px; z-index: 2;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--hv-lila); color: #fff; font-size: 7px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(153,97,255,.5);
}

/* ═══ ADENTRO ════════════════════════════════════════════════════════════════════════════ */
.hv-card-top { display: flex; align-items: center; gap: 10px; }

.hv-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; position: relative;
  background: var(--hv-avatar);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; letter-spacing: .02em;
}
.hv-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* La insignia del canal, abajo a la derecha del avatar (los colores de cada canal son los
   mismos de Embudos: .emb-canal-dot). */
.hv-canal {
  position: absolute; bottom: -1px; right: -1px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 7px; color: #fff;
}
.hv-canal.whatsapp  { background: #25D366; }
.hv-canal.instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.hv-canal.messenger { background: #0084FF; }
.hv-canal.heavensy  { background: #fff; overflow: hidden; }   /* el disco azul lo trae su logo */
.hv-canal.panel     { background: #7D84C1; }                  /* registrado en el panel (Conversaciones) */
.hv-canal img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

.hv-info  { flex: 1; min-width: 0; }
.hv-name  { font-size: 12.5px; font-weight: 700; color: var(--hv-tinta); line-height: 1.3;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-linea { font-size: 10.5px; color: var(--hv-linea-color); margin-top: 1px; line-height: 1.35;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Lo de la derecha: hora, sin leer, punto de estado… apilados y alineados a la derecha. */
.hv-der { display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
          gap: 4px; flex-shrink: 0; min-height: 36px; }
.hv-der:empty { display: none; }
.hv-time { font-size: 10px; color: rgba(56,56,56,.4); white-space: nowrap; }
.hv-punto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.hv-noleidos {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--hv-lila); color: #fff; font-size: 9px; font-weight: 700;
  display: grid; place-items: center; line-height: 1;
}

/* Los chips, debajo. Sin chips no ocupan nada. */
.hv-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.hv-chips:empty { display: none; }
.hv-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9.5px; font-weight: 600; padding: 2px 7px; border-radius: 20px; white-space: nowrap;
}
.hv-chip.svc   { background: rgba(93,109,207,.10); color: #5D6DCF; }     /* un servicio */
.hv-chip.etapa { background: rgba(153,97,255,.10); color: var(--hv-lila); }
.hv-chip.ia    { background: rgba(239,68,68,.08);  color: #dc2626; }     /* IA desactivada */
.hv-chip.dup   { background: rgba(245,158,11,.12); color: #b45309; }     /* posible duplicado */
.hv-chip.cita  { background: rgba(34,197,94,.10);  color: #15803d; }     /* próxima cita */
.hv-chip.suave { background: rgba(56,56,56,.06);   color: rgba(56,56,56,.6); }

/* El pie (Embudos: la etapa y la hora). */
.hv-pie { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.hv-pie:empty { display: none; }

/* En celular, un poco más de aire para el dedo. */
@media (pointer: coarse) {
  .hv-card { padding: 13px 12px 11px; }
  .hv-name { font-size: 13px; }
  .hv-linea { font-size: 11px; }
}