/* ==========================================================================
   LeadSync - Modal "Estado del sistema"
   El arbol de capacidades con sus cuatro estados (item 97).

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

/* --- Modal "Estado del sistema": el árbol de capacidades (item 97) --- */
.conn-crit {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: 6px;
  padding: 1px 5px;
}

/* El veredicto va arriba y separado: responde "¿qué hago?", que es con lo que se abre
   el panel. El árbol de abajo responde "¿cómo está todo?", que es otra pregunta. */
.caps-verdict {
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid var(--border);
  background: var(--bg-elev);
}
.caps-verdict.ok {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.caps-verdict.err { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.caps-verdict.unknown { color: var(--text-dim); }
.caps-verdict-title {
  font-weight: 700;
  color: var(--danger);
  margin-bottom: 6px;
}
.caps-causes {
  margin: 0;
  padding-left: 18px;
}
.caps-causes li { margin-bottom: 6px; }
.caps-causes li:last-child { margin-bottom: 0; }
.caps-why {
  display: block;
  color: var(--text-dim);
  font-size: 12.5px;
  margin-top: 2px;
}
.caps-tree { margin-top: 14px; }
.caps-group { border-bottom: 1px solid var(--border); }
.caps-group:last-child { border-bottom: none; }
.caps-group > summary {
  list-style: none;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color .12s ease;
}
.caps-group > summary::-webkit-details-marker { display: none; }
.caps-group > summary:hover { background: var(--bg-elev); }
.caps-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 6px;
}
.caps-child { padding-left: 25px; }
.caps-child .caps-name {
  font-weight: 400;
  color: var(--text-dim);
}
.caps-name {
  font-weight: 600;
  font-size: 13.5px;
}
.caps-state {
  margin-left: auto;
  font-size: 12px;
  text-align: right;
  color: var(--text-dim);
}
.caps-state.ok { color: var(--accent); }
.caps-state.warn { color: var(--warn); }
.caps-state.err { color: var(--danger); }
.caps-state.off {
  color: var(--text-dim);
  font-style: italic;
}

/* La flechita gira al desplegar; sin ella el summary no se lee como plegable. */
.caps-group > summary .caps-row::after {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  margin-left: 2px;
  border-right: 1.5px solid var(--text-dim);
  border-bottom: 1.5px solid var(--text-dim);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.caps-group[open] > summary .caps-row::after { transform: rotate(225deg) translate(-1px, -1px); }
@media (prefers-reduced-motion: reduce) {
  .caps-group > summary .caps-row::after,
  .caps-group > summary {
    transition: none;
  }
}
.session-list {
  overflow-y: auto;
  flex: 1;
}
.session-item {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 11px;
}
.session-item:hover { background: var(--bg-hover); }

/* UN CHAT NUEVO SE SEÑALA AL ENTRAR (Q7). Sin esto una conversación nueva simplemente
   aparece, y si estabas mirando otra parte de la pantalla no te enteras de que ha pasado
   algo. Se enciende con el color de marca y se apaga sola en medio segundo.

   ES UN DESTELLO Y NO UN DESLIZAMIENTO, y la razón es la regla de siempre llevada hasta el
   final. Una animación sin `fill-mode` termina en el estado natural del elemento… pero eso
   solo vale si LLEGA A TERMINAR. Medido en este proyecto: con el renderer dormido, la
   línea de tiempo del documento se queda clavada en 0 y la animación no avanza NI UN
   FRAME, así que el elemento se queda en su fotograma inicial indefinidamente.

   O sea que el fotograma inicial tiene que ser un estado en el que la fila se pueda leer.
   Con `opacity: 0` o un `translateY`, una conversación nueva podría quedarse invisible o
   descolocada justo cuando más importa verla. Un tinte de fondo congelado no rompe nada:
   se lee igual, y hasta sigue diciendo "esto es nuevo". El movimiento se sacrifica a
   propósito; lo que informa es el destello. */
@keyframes chatEntra {
  from { background-color: color-mix(in srgb, var(--accent) 26%, transparent); }
  55%  { background-color: color-mix(in srgb, var(--accent) 26%, transparent); }
  to   { background-color: transparent; }
}
.session-item.entra-nueva {
  animation: chatEntra 900ms ease-out;
}

/* Con movimiento reducido el destello se queda: no es movimiento, es un cambio de color, y
   es justo la parte que INFORMA. Solo se alarga para que no dé un golpe seco. */
@media (prefers-reduced-motion: reduce) {
  .session-item.entra-nueva { animation-duration: 1200ms; }
}

/* EL CHAT ABIERTO SE TIENE QUE VER (me lo señalaste): con --bg-elev sobre el panel la
   diferencia era de dos puntos de luminosidad y en una lista larga no se encontraba. Un
   tinte del color de marca dice "estás aquí" sin competir con la selección múltiple, que
   lleva además la barra lateral. */
.session-item.active {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-elev));
  box-shadow: inset -3px 0 0 var(--accent);
}

/* El cuerpo es lo que antes era la fila entera: dos líneas apiladas. Ahora convive con el
   avatar, que ocupa el alto de las dos. */
.session-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.session-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.session-name-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.session-phone {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.session-time {
  color: var(--text-dim);
  font-size: 11px;
  flex: 0 0 auto;
}

/* Badge que marca una conversación en manos del bot. */
.chat-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 1px 6px;
  border-radius: 8px;

  /* El color BASE es el del modo activo (item A4): un distintivo "Bot" sin mas dice que el
     bot atiende, que es exactamente el modo activo. Sale del token del modo y no de
     --accent-dim para que el verde de aqui y el del puntito del selector no puedan
     separarse; los demas estados lo pisan con su propia clase. */
  background: var(--modo-activo-bg);
  color: var(--modo-activo);
  flex: 0 0 auto;
}
.chat-badge .ic {
  width: 11px;
  height: 11px;
}

/* item 5, estado B: bot activo pero no disponible (sin conexión/sin créditos) → amarillo. */
.chat-badge.unavailable {
  background: var(--warn-bg);
  color: var(--warn);
}

/* item 5: transferida por el bot y nadie la ha atendido aún (esperando_humano). */
.chat-badge.waiting {
  background: var(--warn-bg);
  color: var(--warn);
}

/* B46: EN COLA — nadie la atiende, ni una persona ni el bot. Azul de información y no ámbar:
   el ámbar de `waiting` es del bot gestionando una espera; esto dice en qué punto está la
   conversación, que es trabajo disponible para quien la tome, no una alarma. */
.chat-badge.en-cola {
  background: var(--info-bg);
  color: var(--info);
}

/* item 132: atendida y cerrada. En gris a propósito: es lo ÚNICO de la bandeja que no pide
   hacer nada, y competir en color con "Esperando" —que sí lo pide— sería mentir al ojo. */
.chat-badge.cerrada {
  background: var(--bg-hover);
  color: var(--text-dim);
}

/* item Q1: el bot está en modo asistencia — redacta pero no envía. No va en ámbar: ámbar en
   esta consola significa "algo va mal o alguien espera", y aquí no pasa nada malo. Es un
   modo de trabajo, no una alarma.
   item A4: su color (azul) vive en css/components/modo-bot.css junto al del resto de modos,
   porque el distintivo y el puntito del selector tienen que decir lo mismo. Antes estaba
   aquí y era el MISMO verde que "Bot", así que el color no distinguía los dos estados. */

/* item Q2: hay una respuesta redactada y SIN REVISAR. Este sí pide acción, así que se pinta
   como lo que es: trabajo pendiente. Lleva el relleno sólido porque tiene que ganarle la
   mirada a los demás badges de la fila — es lo único que se está quedando parado. */
.chat-badge.sugerencia-badge {
  background: var(--accent);
  color: var(--on-accent);
}

/* Item fijo "Mensajes guardados". */

/* El marcador pasó al círculo del avatar (.avatar-saved); aquí solo queda el nombre. */
.saved-item .session-phone { color: var(--accent); }

/* item 51: el previo y el tiempo restante de la ventana comparten la fila de abajo, así
   el contador cae justo debajo de la hora. min-width:0 es obligatorio: sin él el previo
   se niega a encoger y empuja el contador fuera de la fila. */