/* ==========================================================================
   LeadSync - Filas de badges
   Los badges de la lista y de la cabecera, que tienen fila propia.

   OJO CON EL ORDEN: estos ficheros se enlazan en index.html en un orden concreto y
   ese orden ES la cascada. Mover un enlace de sitio cambia que regla gana entre dos
   de la misma especificidad. Si anades uno nuevo, ponlo donde le toque, no al final.
   ========================================================================== */

/* ==========================================================================
   Filas de badges: lista y cabecera (corrección del 11-08, b_11/b_12/b_13)
   ========================================================================== */

/* Los badges tienen FILA PROPIA y son más pequeños que el nombre. Antes compartían línea
   con él: en cuanto había departamento, el nombre se truncaba ("~ Taller ...") y el chip
   se montaba encima de la hora. Un chat que no puedes identificar de un vistazo no sirve. */
.session-tags {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
  min-width: 0;
}
.session-tags .session-time {
  margin-left: auto;
  flex: 0 0 auto;
}

/* SIN BADGES NO SE PINTA ESTA FILA. La hora se va a `.session-meta-right`, en la línea del
   nombre, junto al punto de no leído y la chincheta.

   Aquí hubo un apaño: la fila se colapsaba a `height: 0` y la hora se bajaba 17 px con
   `position: relative`. Eso no la saca del flujo, solo la dibuja en otro sitio — encima de
   `.session-meta-right`. Como las dos se pegan a la derecha, el punto rojo caía justo sobre
   la hora en cualquier chat sin departamento ni bot, que son la mayoría. Colocar a mano algo
   que ya tenía su caja flex al lado es lo que lo provocó. */
.tags-flecha {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--text-dim);
  opacity: .5;
}
.tags-flecha .ic {
  width: 12px;
  height: 12px;
}

/* Los badges de esta fila van UN PUNTO más pequeños que en el resto de la consola: aquí
   son contexto, no el contenido.
   AQUÍ SOLO SE CAMBIA EL TAMAÑO. El relleno es del COMPONENTE y tiene que ser el mismo en
   todas partes: cuando esta regla lo pisaba, el círculo del asignado salía pegado al borde
   de su píldora en la cabecera del chat (1px) y despegado en la lista (6px) — el mismo chip
   con dos aspectos, que es exactamente lo que un componente existe para evitar. Lo mismo le
   pasaba al punto del departamento (5px arriba, 4px en la lista). */
.session-tags .chat-badge,
.session-tags .dept-chip,
.session-tags .asig-chip {
  font-size: 10px;
  max-width: 46%;
}
/* El estado no lleva tope de ancho: es lo único de la fila que no se puede perder. Cuando
   falta sitio suelta el rótulo (más abajo), nunca el tiempo. */
.session-tags .estado-badge { font-size: 10px; }
/* «EN COLA» ES EL MISMO DISTINTIVO QUE EN LA CABECERA (.chat-badge.en-cola: azul, bandeja),
   no un chip de persona con un icono de gente. En la fila solo se le iguala el alto a sus
   hermanos. */
.session-tags .chat-badge {
  min-height: 19px;
  box-sizing: border-box;
}
.session-item-top { min-width: 0; }
.session-name-wrap { min-width: 0; }

/* Chip de "quién lo atiende": avatar + nombre. Ver asignadoChipHTML para por qué es un
   avatar y no un icono genérico. */
.asig-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  padding: 1px 7px 1px 1px;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  white-space: nowrap;
}
.asig-chip.mia {
  border-color: var(--accent);
  color: var(--accent);
}

/* EL CÍRCULO MIDE 15px Y NO 17 (lo cazaste tú): con 17 la píldora del asignado salía 20px
   de alto contra los 17 de la del departamento, y dos chips hermanos en la misma fila con
   alturas distintas se leen como dos cosas de distinto rango. El alto lo fija ahora la
   pareja de reglas de abajo, así que no vuelve a depender de lo que lleve dentro. */
.asig-chip .avatar {
  width: 15px;
  height: 15px;
  font-size: 7.5px;
  flex: 0 0 auto;
}
.asig-chip .avatar.avatar-bot {
  background: var(--bg-hover);
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* EL BOT CONSERVA SU VERDE.
   Antes de B46.3 su distintivo era el `.chat-badge` con el color del modo activo; al pasar
   al hueco de «quién la lleva» tomó la forma de una persona, que es gris salvo la tuya, y
   perdió el color. La forma se queda (es el mismo hueco que las personas) y el color vuelve
   a salir del token del modo, el mismo del puntito del selector. */
.asig-chip.con-bot {
  background: var(--modo-activo-bg);
  border-color: transparent;
  color: var(--modo-activo);
}
.asig-chip.con-bot .avatar.avatar-bot {
  background: transparent;
  color: inherit;
}
.asig-chip .avatar.avatar-bot .ic {
  width: 9px;
  height: 9px;
}

/* LOS DOS CHIPS DE LA FILA MIDEN LO MISMO DE ALTO, venga dentro un punto de color o un
   avatar. Fijarlo aquí —y no confiar en que el contenido case— es lo que evita que
   cualquier cambio futuro (un icono, una inicial más grande) los vuelva a descuadrar. */
.dept-chip,
.asig-chip {
  min-height: 19px;
  box-sizing: border-box;
}

/* El AVATAR va pegado al borde izquierdo de la píldora y el nombre se centra en lo que
   queda (pedido tuyo). Antes los dos iban en bloque, así que el círculo flotaba hacia el
   centro y los chips de chats seguidos no alineaban sus círculos.
   EL RELLENO DE 1px DE LA IZQUIERDA ES PARTE DE ESO: quien reduzca este chip en algún sitio
   cambia `font-size` y `max-width`, NUNCA el padding — si no, el círculo se despega en una
   pantalla y no en otra. */
.asig-nom {
  flex: 1 1 auto;
  text-align: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Posición 3: Estado de la conversación (item B46.3) ---
   La MISMA forma que los chips de al lado (en línea, una sola línea, negrita): sin esto el
   distintivo heredaba la letra del nombre del chat y se partía en dos renglones dentro de
   una píldora gigante (06-10). */
.session-tags .estado-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-transform: none;
  letter-spacing: normal;
  border-radius: 999px;
  min-height: 19px;
  box-sizing: border-box;
  padding: 1px 7px;
  gap: 4px;
  border: 1px solid transparent;
  transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease, border-color var(--dur-hover) ease;
}
@media (prefers-reduced-motion: reduce) {
  .session-tags .estado-badge {
    transition: none !important;
  }
}
.session-tags .estado-badge .estado-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.session-tags .estado-badge .estado-ic .ic {
  width: 10px;
  height: 10px;
}
.session-tags .estado-badge .estado-tiempo {
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.session-tags .estado-badge .estado-lbl {
  white-space: nowrap;
}

/* 1. Cerrado */
.session-tags .estado-badge.estado-cerrado {
  background: var(--bg-hover);
  color: var(--text-dim);
  border-color: var(--border);
}

/* 2. Cerrado · reabrible */
.session-tags .estado-badge.estado-reabrible {
  background: var(--bg-hover);
  color: var(--text-dim);
  border-color: var(--border);
}

/* 3. Esperando cliente (en gris, sin escalar) */
.session-tags .estado-badge.estado-esperando-cliente {
  background: var(--bg-hover);
  color: var(--text-dim);
  border-color: var(--border);
}

/* 4. Sin responder (cambia a color de alerta al superar sin_responder_alerta_min) */
.session-tags .estado-badge.estado-sin-responder {
  background: var(--info-bg);
  color: var(--info);
  border-color: color-mix(in srgb, var(--info) 30%, transparent);
}
.session-tags .estado-badge.estado-sin-responder.alerta {
  background: var(--warn-bg);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
}

/* EL RÓTULO DEL ESTADO SE SUELTA SOLO SI NO CABE, fila a fila. Un corte por ancho de columna
   lo quitaba también en las filas con sitio de sobra (un «Cerrado» con solo el departamento
   al lado). Lo mide chatlist.js (compactarEstados) y marca la fila; sin rótulo queda el icono
   y el tiempo en su color, y el rótulo sigue en el tooltip. */
.session-tags.tags-compactas .estado-badge .estado-lbl,
.session-tags.tags-compactas .estado-badge .estado-sep {
  display: none;
}

/* --- Cabecera del chat ---
   OJO: `.chat-titles`, `.chat-header-info` y `.chat-header-actions` SE DECLARAN ARRIBA,
   con el resto de la cabecera. Aquí estaban otra vez, 3300 líneas después y con valores
   distintos (`min-width: 0` y `flex: 0 0 auto`), así que ganaban por orden y dejaban sin
   efecto lo de allí — el nombre del cliente volvía a poder encogerse hasta cero y la barra
   que mide el desbordamiento nunca se enteraba (b_27). Un mismo hecho declarado en dos
   sitios acaba SIEMPRE en dos verdades: si hay que tocar el reparto de la cabecera, se
   toca arriba. */

/* LA FILA DE BADGES NUNCA SE PARTE EN DOS (petición tuya, 12-08). Con `wrap`, en cuanto
   coincidían departamento + asignado + estado, la fila se abría a dos líneas y empujaba el
   nombre del cliente hacia abajo: la cabecera daba un salto de alto cada vez que alguien
   tomaba un chat. En una sola línea, lo que no cabe se recorta con puntos suspensivos —el
   mismo criterio que la fila de la lista, que ya iba así—: primero cede el departamento y
   después el nombre de quien atiende, porque el ESTADO es lo que no se puede perder.
   `min-width: 0` en los hijos es obligatorio: sin él un flex no baja de su contenido y la
   fila desborda en vez de recortarse. */
.chat-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}
.chat-tags > .chat-dept {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
}
.chat-tags .dept-chip,
.chat-tags .asig-chip {
  min-width: 0;
  flex: 0 1 auto;
}
/* EL BADGE DE ESTADO CEDE ANTES QUE LOS BOTONES (petición tuya): cuando falta ancho, se
   recorta su TEXTO con puntos suspensivos y el icono se queda entero — el mismo trato que
   ya tenían los chips de la lista. Antes era `flex: 0 0 auto`, o sea que no cedía nunca:
   exigía su ancho completo, la caja de acciones se quedaba sin sitio y el navegador
   recortaba el panel y los tres puntos.
   El icono solo, sin texto, sigue diciendo en qué estado está; un botón recortado a la
   mitad no dice nada. */
/* OJO CON EL SELECTOR: el badge de la cabecera se pinta desde app.js REEMPLAZANDO su
   className por "chat-badge header-bot-badge …", así que la clase `state-badge` que trae
   el HTML inicial desaparece en cuanto hay una conversación abierta. Apuntar a
   `.state-badge` aquí no casaba con nada — comprobado midiendo: el badge seguía con
   `flex-shrink: 0`. */
.chat-tags .chat-badge,
.chat-tags .state-badge {
  flex: 0 1 auto;
  min-width: 24px;
}
.chat-dept {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chat-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}