/* ==========================================================================
   LeadSync - Lista de conversaciones
   El buscador de la lista y los filtros por etiqueta (chips de tres estados).

   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.
   ========================================================================== */

/* --- Buscador de la lista de chats --- */

/* EL BUSCADOR VIVE EN LA CABECERA, en el hueco que dejó la marca al mudarse al rail
   (petición tuya, 2026-08-12): tenía una fila propia para un solo campo, y en la bandeja
   —que es la pantalla donde se mira todo el día— esa fila vale media conversación más.
   La lupa y la "X" van DENTRO del campo, en posición absoluta: fuera se comían 25px del
   ancho útil justo donde menos sobra. */
.sidebar-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}
.sidebar-search-ic {
  position: absolute;
  left: 10px;
  display: inline-flex;
  color: var(--text-dim);
  pointer-events: none;
}
.sidebar-search-ic .ic {
  width: 16px;
  height: 16px;
}
.sidebar-search input {
  flex: 1;
  min-width: 0;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;

  /* Los laterales dejan sitio a la lupa y a la "X", que van encima del campo. */
  padding: 7px 30px 7px 32px;
  color: var(--text);
  font-size: 13.5px;
  outline: none;
  transition: border-color .15s ease;
}
.sidebar-search input:focus { border-color: var(--accent); }
.chat-search-clear {
  position: absolute;
  right: 4px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.chat-search-clear:hover {
  color: var(--text);
  background: var(--bg-hover);
}
.chat-search-clear .ic {
  width: 16px;
  height: 16px;
}

/* --- Filtros por etiqueta (lista de chats, notificaciones…) ---
   ENVUELVEN en varias filas, nunca scroll horizontal: con scroll, cada clic devolvía la
   barra al principio y elegir varias etiquetas era incómodo. */
.tag-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* Modo AGRUPADO (item 137): el control segmentado arriba y, debajo, solo las etiquetas del
   grupo que se está mirando. Se apila, así que el contenedor cambia de eje. */
.tag-filters.con-grupos {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.tag-filters-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* El nombre cede espacio antes que «Filtros», incluso con nombres largos en móvil. */
.tag-filters-head.con-operador { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; min-width: 0; gap: 8px; }
.con-operador .tag-filters-titulo { align-self: center; flex-shrink: 0; }
/* COMPACTO: la fila de «Filtros» no debe crecer por este botón (06-10, «demasiado grande»).
   Apenas más alto que el rótulo: avatar de 16 px, letra de 12 y relleno mínimo. */
.operador-filtro { min-width: 0; max-width: 65%; gap: 5px; padding: 2px 8px 2px 3px; font-size: 12px; }
.operador-filtro .avatar { width: 16px; height: 16px; font-size: 7px; }
.operador-filtro > .ic:first-child { width: 14px; height: 14px; margin-left: 3px; }
.operador-filtro .filter-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.operador-filtro > svg { width: 14px; height: 14px; flex-shrink: 0; }
.operador-filtro .avatar { flex-shrink: 0; }
.operador-resumen { width: 100%; font-size: 12px; color: var(--text-dim); overflow-wrap: anywhere; }

/* El titulito dice de qué va la fila de abajo. Pequeño y en mayúsculas de caja pequeña:
   es una etiqueta de sección, no un encabezado que compita con el nombre de un chat. */
.tag-filters-titulo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.tag-filters-titulo:hover { color: var(--text); }
.tag-filters-titulo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* El chevron GIRA en vez de cambiar de dibujo: el giro dice de dónde viene y a dónde va lo
   que se pliega; dos iconos distintos solo parpadearían. */
.tf-chev {
  display: inline-flex;
  transition: transform 180ms ease;
}
.tf-chev svg {
  width: 11px;
  height: 11px;
}
.tag-filters.plegado .tf-chev { transform: rotate(-90deg); }

/* Plegado y con algo marcado: el puntito. Los filtros siguen actuando aunque no se vean. */
.tf-punto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* EL CUERPO SE ANIMA CON `grid-template-rows` (0fr → 1fr): es la forma de llegar hasta "lo
   que mida el contenido" sin medirlo con JS ni inventarse un max-height que recorte el día
   que haya un filtro más. El hijo necesita `min-height: 0` o no se deja encoger. */
.tag-filters-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 200ms ease, opacity 160ms ease;
}
.tag-filters-body > * {
  min-height: 0;
  overflow: hidden;
}
.tag-filters-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tag-filters.plegado .tag-filters-body {
  grid-template-rows: 0fr;
  opacity: 0;
}
.tag-filters.plegado { gap: 0; }
@media (prefers-reduced-motion: reduce) {
  .tag-filters-body,
  .tf-chev {
    transition: none;
  }
}
.tag-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* Cambiar de pestaña DESLIZA las etiquetas en el sentido del movimiento (idea tuya): entran
   por el lado del que vienen, como un carrusel. Animación y no transición: si no llega a
   correr, el elemento se queda en su estado natural en vez de invisible para siempre. */
.tag-chips.entra-der { animation: chips-der 180ms ease-out; }
.tag-chips.entra-izq { animation: chips-izq 180ms ease-out; }
@keyframes chips-der {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
}
@keyframes chips-izq {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tag-chips.entra-der,
  .tag-chips.entra-izq {
    animation: none;
  }
}

/* Una etiqueta que existirá y todavía no ("Cerrados", hasta el item 132): se ve, se explica
   en su title y no se puede marcar. */
.filter-tab:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.filter-tab:disabled:hover { background: transparent; }

/* El candado de la etiqueta fija: no es que falte una opción, es que esa es tu bandeja. */
.filter-candado {
  display: inline-flex;
  opacity: .75;
}
.filter-candado svg {
  width: 11px;
  height: 11px;
}

/* Separador entre grupos de filtros: una línea fina, no un hueco más grande. El hueco solo
   se lee cuando las dos cosas están en la misma fila, y estos chips envuelven. */
.filter-sep {
  flex: 0 0 auto;
  width: 1px;
  height: 18px;
  margin: 0 2px;
  background: var(--border);
}

/* El punto del departamento: mismo color que su franja en la lista y que su chip en el
   chat. Es lo único que hace falta para que no se confunda con un estado. */
.filter-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  margin-right: 1px;
}
.chat-filters {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);

  /* El deslizamiento al cambiar de pestaña entra desde fuera de la caja: sin esto, esos
     18px asomarían y darían scroll horizontal a la bandeja durante la animación. */
  overflow: hidden;
}
.filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease, border-color var(--dur-hover) ease;
}
.filter-tab:hover { background: var(--bg-hover); }
.filter-tab.active {
  background: var(--accent-dim);
  color: var(--author-bot);
  border-color: transparent;
}

/* TERCER ESTADO: la etiqueta EXCLUYE (item T5). No basta con otro color —quien no distinga
   el rojo vería un chip cualquiera—: el nombre va TACHADO, que es la convención de "esto
   está quitado" y no depende de ver el color.
   SIN CONTORNO (Q6): el chip positivo no lo lleva, y dos chips del mismo componente con
   distinto borde se leen como dos componentes distintos. El relleno ya dice el estado. */
.filter-tab.negado {
  background: var(--danger-dim, color-mix(in srgb, var(--danger) 14%, transparent));
  color: var(--danger);
  border-color: transparent;
}
.filter-tab.negado .filter-label {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
/* Un filtro NEGADO ("todo menos esto") tiñe su recuento, pero sin pastilla: sigue siendo un
   recuento. Lo que dice el tachado del texto ya basta. */
.filter-tab.negado .filter-count {
  color: var(--danger);
}
.filter-tab.negado .filter-count.alerta {
  background: var(--danger);
  color: #fff;
}
/* EL CIRCULO SIGNIFICA "FALTA ATENDER ESTO". Un recuento va SIN circulo.

   Lo pediste hace tiempo y seguia mal: *"si es solo contar, no tenga el circulo porque es
   confuso, porque es como un highlight que indica NO LEIDO [...] el circulo indica no leidos,
   sale cuando si hay un solo no leido"*.

   Y es exacto: una pastilla de color es la forma universal de decir "aqui hay algo pendiente".
   Ponersela a un numero que solo dice CUANTOS HAY es prometer trabajo que no existe, y
   entonces la pastilla deja de querer decir nada — que es lo que le pasa a un aviso que salta
   siempre.

   Asi que quedan dos formas y una sola regla:

     recuento           ->  numero pelado, apagado. "Hay 12 chats."
     falta atender algo ->  pastilla roja (.alerta). "Hay 3 sin leer."

   Sin nada sin atender no hay pastilla en ninguna parte, que es justo la señal de que no hay
   nada que hacer. */
.filter-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  min-width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* En la pestaña elegida el recuento se lee entero, pero sigue sin pastilla: estar mirando un
   filtro no convierte su recuento en trabajo pendiente. */
.filter-tab.active .filter-count { color: var(--text); }

/* LA PASTILLA ES SOLO PARA LO QUE FALTA ATENDER. Antes esto era "el rojo frente al verde", o
   sea dos pastillas de colores distintos; ahora es "pastilla o nada", que es la diferencia
   que de verdad hay que ver. */
.filter-count.alerta,
.filter-tab.active .filter-count.alerta {
  background: var(--notif);
  color: #fff;
  padding: 0 4px;
  border-radius: 8px;
}

/* "Mostrando 20 de 50 conversaciones". Es una nota AL PIE de la lista: pequeña, atenuada y
   centrada, para que se lea al llegar abajo y no compita con nada.

   El borde va ARRIBA y no abajo desde que bajó de sitio: separa la nota de la última fila,
   que es lo que tiene encima. Con el borde inferior quedaba una raya suelta al final del
   panel. */
.chat-count {
  padding: 7px 12px 9px;
  font-size: 11.5px;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
  font-variant-numeric: tabular-nums;
  text-align: center;
  flex: 0 0 auto;
}
.chat-count.hidden { display: none; }

/* Estado vacío de la lista de chats. */
.session-empty {
  color: var(--text-dim);
  text-align: center;
  padding: 24px 16px;
  font-size: 13px;
}