/* ============================================================
   MLG IA Orchestrator — Chat en modo claro (override quirúrgico)
   Se carga DESPUÉS de style.css y login-light.css.
   Cubre: sidebar, área de mensajes, input tipo Gemini, menú "+",
   panel lateral de dashboards.
   ============================================================ */

/* ─── Indicador visible del agente activo (siempre presente arriba del chat) ──
   Antes solo se veía en el selector del sidebar, invisible cuando el sidebar
   estaba colapsado. SEGUNDA PASADA (pedido: "deberías poner algo más cool y
   un poco más visible"): pill con gradiente + pulso animado tipo "sinapsis"
   (mismo lenguaje visual que ya usa el header del sidebar) en vez de texto
   plano sobre fondo gris. */
/* BUG REAL reportado por Eduardo con captura + devtools: sin max-width ni
   truncado, el banner (y el nombre del agente dentro) podían crecer sin
   límite si el nombre era largo, generando overflow horizontal de toda la
   página (barra de scroll no deseada). max-width + overflow:hidden en el
   banner completo, ellipsis en el nombre (ver #activeAgentName abajo). */
.active-agent-banner {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: min(90vw, 420px);
  margin: 14px 20px 0;
  padding: 7px 16px 7px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #eaf2ff 0%, #f5f9ff 100%);
  border: 1px solid rgba(50, 128, 252, 0.25);
  box-shadow: 0 4px 14px rgba(50, 128, 252, 0.18);
  font-size: 13.5px;
  font-weight: 700;
  color: #1a3a6b;
  letter-spacing: 0.1px;
  /* PERSISTENTE al hacer scroll (reportado: "se pierde cuando bajas") — el
     banner vivía en flujo normal, así que se iba con el resto del chat al
     hacer scroll hacia abajo en la conversación. sticky lo fija respecto al
     contenedor de scroll real (.loginMain) sin necesitar JS ni tocar el
     layout existente. z-index alto para quedar por encima de los mensajes. */
  position: sticky;
  top: 12px;
  z-index: 20;
}

/* Banner clic-eable (pedido de Eduardo: elegir agente directamente desde
   aquí, sin depender del sidebar) + dropdown propio con la lista de agentes
   disponibles. Reusa la misma pill visual, solo agrega cursor + hover sutil
   y el contenedor del dropdown. */
.active-agent-banner-clickable {
  cursor: pointer;
  position: sticky; /* se mantiene sticky, solo se agrega position:relative
                        vía el hijo dropdown que es absolute respecto a este */
}

.active-agent-banner-clickable:hover {
  box-shadow: 0 4px 18px rgba(50, 128, 252, 0.28);
}

.active-agent-banner-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: #ffffff;
  border: 1px solid #e3e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(20, 33, 61, 0.18);
  padding: 6px;
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.active-agent-banner-option {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #1a3a6b;
  cursor: pointer;
}

.active-agent-banner-option:hover {
  background: #eef5ff;
}

.active-agent-banner-option.active {
  background: #e2edff;
}

.active-agent-banner .agent-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(20, 33, 61, 0.12);
  font-size: 14px;
}

.active-agent-banner .agent-active-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #6aa8ff, #3280fc 70%);
  box-shadow: 0 0 6px rgba(50, 128, 252, 0.9);
  flex-shrink: 0;
}

.active-agent-banner .agent-active-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid #3280fc;
  animation: synapsePulseRing 2.4s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}

/* Pedido explicito de Eduardo: el pulso debe reflejar el estado REAL del
   servicio de Anthropic (status.claude.com), no ser siempre azul fijo.
   Verde = operativo, amarillo = degradado/incidente menor, rojo = incidente
   mayor/critico. JS (pollAnthropicStatus en app.js) agrega estas clases al
   mismo elemento .agent-active-dot segun la respuesta cacheada del backend
   (GET /api/v1/system/anthropic-status), sin tocar el color base cuando el
   estado aun no se ha consultado (queda el azul original como neutro). */
.active-agent-banner .agent-active-dot.status-green {
  background: radial-gradient(circle at 35% 35%, #6fe3a0, #22c55e 70%);
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.9);
}

.active-agent-banner .agent-active-dot.status-green::after {
  border-color: #22c55e;
}

.active-agent-banner .agent-active-dot.status-yellow {
  background: radial-gradient(circle at 35% 35%, #ffe17a, #eab308 70%);
  box-shadow: 0 0 6px rgba(234, 179, 8, 0.9);
}

.active-agent-banner .agent-active-dot.status-yellow::after {
  border-color: #eab308;
}

.active-agent-banner .agent-active-dot.status-red {
  background: radial-gradient(circle at 35% 35%, #ff8a8a, #ef4444 70%);
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.9);
}

.active-agent-banner .agent-active-dot.status-red::after {
  border-color: #ef4444;
}

#activeAgentName {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
}

.active-agent-banner .agent-label {
  color: #6b7ea3;
  font-weight: 500;
  margin-right: -3px;
}

/* ─── Fondo general del chat (antes negro) ────────────────────────── */
.second .bg-login,
.second .bg-login2,
.second {
  background-color: #eef2f9 !important;
  color: #14213d;
}

.second .synapse {
  opacity: 0.06;
}

/* ─── Indicador "vivo" de Synapse (header del sidebar) ──────────────
   Sustituye la animación de fondo (canvas) que se quitó del modo claro por
   varias ondas concéntricas escalonadas, simulando un pulso de sinapsis real
   (no un solo anillo simple). */
.synapse-pulse {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.synapse-pulse.synapse-pulse-sm {
  width: 16px;
  height: 16px;
}

.synapse-pulse .pulse-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #6aa8ff, #3280fc 70%);
  box-shadow: 0 0 8px rgba(50, 128, 252, 0.9);
  z-index: 2;
}

.synapse-pulse .pulse-ring {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #3280fc;
  animation: synapsePulseRing 2.4s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}

.synapse-pulse .pulse-ring:nth-child(2) {
  animation-delay: 0s;
}

/* Segundo y tercer anillo generados via box-shadow escalonado en pseudo-elementos
   del propio .pulse-ring para dar el efecto de "ondas expandiéndose" tipo sinapsis */
.synapse-pulse::before,
.synapse-pulse::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #3280fc;
  animation: synapsePulseRing 2.4s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
  pointer-events: none;
}

.synapse-pulse::before {
  animation-delay: 0.6s;
}

.synapse-pulse::after {
  animation-delay: 1.2s;
}

@keyframes synapsePulseRing {
  0% {
    transform: scale(0.5);
    opacity: 0.9;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

/* ─── Botones de ícono del sidebar colapsado (uniformes, antes SVGs mezclados) */
.sidebar-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 10px auto;
  border-radius: 10px;
  color: #33415c;
  font-size: 18px;
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}

.sidebar-icon-btn:hover {
  background: rgba(50, 128, 252, 0.1);
  color: #3280fc;
}

.sidebar-icon-home {
  margin-top: 20px;
  margin-bottom: 16px;
}

/* El logo Synapse (rail colapsado) y el icono de cerrar (sidebar expandido)
   ahora son <button> reales que ACTUAN como el toggle del sidebar (referencia
   Gemini/Claude: click en el logo/marca abre o cierra la barra, sin flecha
   separada). Se resetean estilos nativos de boton para que se vean idénticos
   a los demas iconos .sidebar-icon-btn (que normalmente son <a>). */
.sidebar-logo-toggle {
  border: none;
  cursor: pointer;
}

.sidebar-logo-toggle img {
  display: block;
}

/* Pedido explicito de Eduardo: el link plano "Cerrar sesion" (texto azul
   subrayado tipo hipervinculo viejo) se ve fuera de lugar en la interfaz
   actual. Convertido a boton real con el mismo lenguaje visual que el resto
   de acciones del sidebar (fondo sutil, icono + texto, hover consistente). */
/* justify-content:center agregado (pedido de Eduardo: botón de cerrar sesión
   debe verse centrado, no con ícono+texto pegados a la izquierda). */
.btn-sidebar-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(20, 33, 61, 0.08);
  border-radius: 10px;
  background: #ffffff;
  color: #33415c;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-sidebar-logout i {
  font-size: 16px;
  color: #6b7ea3;
  transition: color 0.15s ease;
}

.btn-sidebar-logout:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.25);
}

.btn-sidebar-logout:hover i {
  color: #ef4444;
}

/* ─── Lista real de conversaciones (sidebar) ────────────────────────
   Referencia Gemini: item de la sesion ACTIVA resaltado, menu de 3 puntos por
   item (aparece al hover, como en la captura de Eduardo) con "Cambiar nombre". */
.chat-session-item {
  position: relative;
  border-radius: 8px;
  margin: 1px 0;
  /* Causa raiz real del desbordamiento (fila de 388px dentro de un <ul> de
     224px reales): el <li> no forzaba su ancho al 100% del <ul> padre, asi
     que se ajustaba al ancho de SU CONTENIDO (titulo + boton de 3 puntos)
     en vez de respetar el ancho disponible real. */
  width: 100%;
  min-width: 0;
}

.chat-session-item.active {
  background: rgba(50, 128, 252, 0.12);
}

.chat-session-item.active .chat-session-title {
  color: #3280fc;
  font-weight: 700;
}

/* BUG REAL (auditoria movil, Eduardo, cadena del bug del dropdown cortado):
   la fila no tenía width/min-width propio dentro de #chatSessionsList
   (nav.flex-column) -- sin eso, un <li> flex puede expandirse mas alla del
   ancho real del sidebar si su contenido (titulo + boton) lo permite,
   confirmado con getBoundingClientRect: fila de 388px de ancho real dentro
   de un sidebar de solo 280px visibles. Eso arrastraba consigo al boton de
   3 puntos (y su dropdown) fuera del area visible. Fix: forzar el ancho
   real de la fila al 100% de su contenedor, con min-width:0 para permitir
   que el titulo trunque correctamente en vez de expandir la fila. */
.chat-session-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  width: 100%;
  min-width: 0;
}

.chat-session-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  border: none;
  background: transparent;
  color: #33415c;
  font-size: 13px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
}

.chat-session-item:hover .chat-session-title,
.chat-session-item:not(.active):hover {
  background: rgba(20, 33, 61, 0.05);
}

.chat-session-menu-wrap {
  position: relative;
  flex-shrink: 0;
}

/* BUG REAL CRITICO (auditoria movil, Eduardo -- "vicepresidencia sobre todo
   lo va a usar en movil"): antes el boton dependia 100% de :hover para
   hacerse visible (opacity:0 por defecto, solo opacity:1 en
   .chat-session-item:hover). :hover no existe de forma confiable en
   pantallas tactiles reales (algunos navegadores moviles simulan un
   "hover fantasma" en el primer toque y otros no lo activan nunca) -- el
   boton de renombrar/fijar/eliminar chat quedaba invisible e inaccesible
   para cualquier usuario en movil, sin ninguna forma de activarlo con el
   dedo. Fix definitivo (sin depender de detectar hover, que no se puede
   validar de forma 100% confiable en todos los navegadores/dispositivos):
   el boton queda SIEMPRE visible, en desktop y movil por igual (mismo
   patron ya usado por Gemini/ChatGPT web). Touch target ampliado de
   24x24 a 32x32 para mejorar precision del toque. */
.chat-session-menu-btn {
  border: none;
  background: transparent;
  color: #8a97b3;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  opacity: 1;
  transition: background 0.1s ease, color 0.1s ease;
}

.chat-session-menu-btn:hover {
  background: rgba(50, 128, 252, 0.12);
  color: #3280fc;
}

/* BUG REAL (auditoria movil, Eduardo, tras el fix del boton de 3 puntos):
   el dropdown se posicionaba con right:0 relativo al wrap del boton, que
   vive pegado al borde derecho de la fila del chat -- eso hacia que el
   dropdown (170px de ancho minimo) se desbordara MAS ALLA del ancho real
   del sidebar (280px), y como el sidebar tiene overflow-x:hidden (fix de
   una ronda anterior contra el scroll horizontal no deseado), el dropdown
   quedaba cortado a la mitad, invisible en su parte derecha. Fix: anclar
   el dropdown al borde IZQUIERDO del wrap en vez del derecho, para que
   crezca hacia la izquierda (donde SI hay espacio real dentro del sidebar)
   en vez de hacia la derecha (donde se corta). */
.chat-session-menu-dropdown {
  display: none;
  position: absolute;
  right: 0;
  left: auto;
  top: calc(100% + 4px);
  z-index: 25;
  min-width: 170px;
  max-width: calc(100vw - 24px);
  background: #ffffff;
  border: 1px solid #e3e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20, 33, 61, 0.16);
  padding: 4px;
}

@media (max-width: 767px) {
  .chat-session-menu-dropdown {
    right: auto !important;
    left: -140px !important;
  }

  /* Auditoria movil (Eduardo): las 5 tarjetas grandes de acciones rapidas
     (#inicialQuickActions) ocupan demasiado espacio de pantalla en movil,
     obligando a hacer mucho scroll antes de ver el input para escribir.
     Sugerencia de Eduardo, implementada tal cual: en movil se ocultan estas
     tarjetas y el titulo "Herramientas avanzadas IA MLG:", dejando SOLO el
     saludo inicial + el boton flotante (FAB) como unico punto de acceso a
     las herramientas -- el FAB ahora tambien aparece en la pantalla inicial
     en movil (antes solo aparecia con conversacion activa, ver JS
     toggleQuickActionsFabVisibility en app.js). El comportamiento de
     escritorio (>767px) no se toca: las tarjetas grandes siguen igual. */
  #inicialQuickActions,
  #inicialQuickActionsLabel {
    display: none !important;
  }
}

.chat-session-menu-dropdown.open {
  display: block;
}

.chat-session-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  color: #33415c;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
}

.chat-session-menu-item:hover {
  background: rgba(50, 128, 252, 0.08);
  color: #3280fc;
}

/* Item "Borrar" en rojo, referencia directa a la captura de Gemini que
   compartió Eduardo (icono de bote de basura en color de alerta). */
.chat-session-menu-item-danger {
  color: #ef4444;
}

.chat-session-menu-item-danger:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
}

/* ─── Sidebar ──────────────────────────────────────────────────────── */
/* Sidebar con un tono ligeramente más oscuro que el área de chat para dar
   jerarquía visual real (antes ambos eran blanco puro y se perdía el límite).
   Referencia Gemini (captura de Eduardo): NO hay ninguna línea/borde duro
   entre el sidebar y el chat, solo el leve cambio de tono de fondo. El
   border-right sólido se reemplazó por un degradado angosto que se difumina
   hacia transparente, para dar la sensación de límite sin dibujar una línea. */
.sidebar,
.sidebar.bg-login2,
#fullsidebar.bg-login2 {
  background-color: #f7f9fd !important;
  border-right: none;
  color: #14213d;
  position: relative;
}

.sidebar::after,
.sidebar.bg-login2::after,
#fullsidebar.bg-login2::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 14px;
  transform: translateX(100%);
  background: linear-gradient(to right, rgba(20, 33, 61, 0.05), transparent);
  pointer-events: none;
}

/* Referencia Gemini (captura real de Eduardo + devtools): cuando el sidebar
   está COLAPSADO (solo la franja de iconos, #collapsedsidebar), en Gemini no
   existe ninguna caja/fondo visible -- los iconos flotan directamente sobre
   el fondo de la página, sin límite marcado. Nuestro rail colapsado aún
   pintaba el mismo fondo sólido #f7f9fd que el sidebar expandido (visible en
   devtools). Se anula el fondo y el degradado SOLO en el estado colapsado
   para que se funda por completo, como en la referencia. */
.col-md-3.sidebar.collapsed,
.col-md-3.sidebar.collapsed #collapsedsidebar {
  background-color: transparent !important;
}

.col-md-3.sidebar.collapsed::after {
  display: none;
}

.sidebar .nav-link,
.sidebar .link-dark,
.sidebar a,
.sidebar .dropdown a {
  color: #33415c !important;
}

.sidebar .nav-link.active {
  background-color: rgba(50, 128, 252, 0.12) !important;
  color: #3280fc !important;
  border-radius: 8px;
}

.sidebar .dashboardInfo,
.sidebar .dashboardInfo span,
.sidebar .advice2,
.sidebar .powered2 {
  color: #5b6784 !important;
}

/* Ampliado (mismo motivo que en style.css): aplica tambien a "Agente activo",
   que no vive dentro de un .nav-item. */
.sectionTitle {
  color: #14213d !important;
}

/* Estado vacío de la lista de chats (mejora UX, revision de Eduardo): antes
   solo un parrafo gris chico, perdido en un area muy grande y vacia. Icono
   sutil + texto mejor jerarquizado, sin cambiar el layout flex general del
   sidebar (no se centra verticalmente todo el bloque para no arriesgar el
   layout existente -- solo se mejora la presentacion del mensaje mismo). */
.chat-sessions-empty-state {
  padding: 24px 16px;
  text-align: left;
  color: #9aa7c2;
}

.chat-sessions-empty-state i {
  font-size: 22px;
  color: #c7d1e5;
  display: block;
  margin-bottom: 8px;
}

.chat-sessions-empty-state p {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.sidebar hr {
  border-color: #e3e8f0;
  opacity: 1;
}

.btn.btn-primary.outline.txt-white {
  color: #3280fc !important;
  border-color: #3280fc !important;
  background: transparent;
}

/* ─── Panel de toggler / colapsado del sidebar ───────────────────────*/
/* BUG REAL (devtools de Eduardo): esta regla pintaba SIEMPRE fondo solido en
   #collapsedsidebar, ganando por cascada sobre el transparent agregado arriba
   para el rail colapsado -- por eso seguia viendose la caja solida en vez de
   fundirse como en Gemini. El boton de toggler si conserva su fondo (control
   real); el contenedor del rail ya no debe tener fondo propio. */
.sidebar .btn.btn-section-toggler {
  background-color: #eef2f9 !important;
  color: #33415c !important;
  border-right: none;
}

#collapsedsidebar {
  background-color: transparent !important;
  color: #33415c !important;
  border-right: none;
}

/* Ya no se usan estos SVGs mezclados (reemplazados por .sidebar-icon-btn con
   bootstrap-icons uniformes), pero se anulan por si el HTML original persiste. */
.sidebarLink,
.sidebarHomeLink {
  display: none;
}

/* ─── Mensajes de chat ───────────────────────────────────────────────*/
.txt-1, .txt-2, .txt-3 {
  color: #14213d !important;
}

/* Globos sutiles tipo Gemini (reportado: "los globos flotantes son muy
   sutiles, así los quiero"):
   - Mensaje del AGENTE: SIN globo — texto directo sobre el fondo, sin borde
     ni sombra ni fondo blanco (como Gemini, que no encierra sus respuestas
     en una tarjeta).
   - Mensaje del USUARIO: pill gris muy suave, redondeado, sin sombra dura
     ni colita. */
.message.ai {
  background-color: transparent !important;
  color: #202a3d;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 2px !important;
  animation: msgBubbleIn 0.25s ease;
}

.message.user {
  /* Más opaco/contrastado (pedido explícito: "pon un poco mas opaco el fondo
     de los globos del usuario" — #e9eef6 era demasiado tenue, casi invisible
     contra el fondo del chat). */
  background-color: #dbe4f3 !important;
  color: #14213d;
  border: none !important;
  box-shadow: none !important;
  border-radius: 18px !important;
  padding: 10px 16px !important;
  animation: msgBubbleIn 0.25s ease;
}

/* Quitar las "colitas" triangulares de los globos (::after) — Gemini no las
   usa, se ve más limpio. */
.message.ai::after,
.message.user::after {
  display: none !important;
}

@keyframes msgBubbleIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Chips de archivos adjuntos DENTRO del mensaje del usuario (pedido
   explícito: que se vea qué archivo se mandó junto con el texto, referencia
   visual a cómo lo hace OpenClaw) — antes el archivo se subía pero
   desaparecía sin dejar rastro en el mensaje enviado. */
.message-attached-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

/* Tarjeta de artefacto dentro del mensaje del agente (patrón Gemini/Claude:
   card con ícono + título + botón "Abrir" que reabre el dashboard en el panel). */
.artifact-card {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  background: #f7f9fd;
  border: 1px solid #e3e8f0;
  border-radius: 12px;
  max-width: 340px;
}

.artifact-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e3e8f0;
  color: #3280fc;
  font-size: 16px;
  flex-shrink: 0;
}

.artifact-card-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #14213d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.artifact-card-open {
  flex-shrink: 0;
  border: none;
  background: #3280fc;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.artifact-card-open:hover {
  background: #2470ea;
}

.attached-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(50, 128, 252, 0.25);
  border-radius: 14px;
  padding: 3px 10px 3px 8px;
  font-size: 11.5px;
  color: #14213d;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bloques internos de una respuesta del agente (párrafos, items de lista,
   filas de tabla) aparecen con un pequeño desfase entre sí (ver
   animateBlocksIn() en app.js) en vez de mostrarse todos de golpe en un solo
   bloque estático — da sensación de que la respuesta se va "revelando". */
.message.ai .msg-block-in {
  opacity: 0;
  animation: msgBlockIn 0.35s ease forwards;
}

/* <tr> con transform puede colapsar su layout en algunos navegadores si se le
   aplica display distinto; se anima solo la opacidad de las filas de tabla
   (sin translateY) para no arriesgar el layout de la tabla renderizada. */
table .msg-block-in {
  animation-name: msgRowIn;
}

@keyframes msgRowIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes msgBlockIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message.ai::after {
  border-right-color: #ffffff;
  filter: drop-shadow(-2px 1px 1px rgba(20, 33, 61, 0.06));
}

/* BUG REAL encontrado: había un segundo bloque .message.user viejo aquí que
   vivía DESPUÉS del bloque nuevo (línea ~269) en este mismo archivo, así que
   ganaba por cascada y pisaba el globo sutil rediseñado. Consolidado en un
   solo lugar (ver bloque único más arriba) para que no vuelva a competir. */

.message.ai.animation p.txt-white {
  color: #5b6784 !important;
}

/* El original deja "message ai animation" con background transparent (pensado
   para fondo oscuro), por eso el bloque "Synapse está analizando..." se ve
   flotando sin tarjeta y desalineado. Se le da la misma tarjeta que .message.ai. */
.message.ai.animation {
  background-color: #ffffff !important;
  border: 1px solid #dde3ef;
  box-shadow: 0 2px 8px rgba(20, 33, 61, 0.08);
  border-radius: 5px;
  display: flex;
  align-items: center;
  width: fit-content !important;
  max-width: calc(100% - 60px);
}

.message.ai.animation .d-block {
  display: flex !important;
  align-items: center;
}

.message.ai.animation p.txt-white {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.message.ai.animation img.loader {
  height: 14px;
  margin: 0;
}

/* ─── Contenido markdown renderizado dentro de mensajes del agente ────────
   marked.js genera HTML real (tablas, listas, negritas, código) que antes
   no tenía ningún estilo propio y se veía apretado/sin jerarquía. */
.message.ai table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 13.5px;
}

.message.ai th,
.message.ai td {
  border: 1px solid #dde3ef;
  padding: 6px 10px;
  text-align: left;
}

.message.ai th {
  background: #f0f3f9;
  font-weight: 600;
}

.message.ai ul,
.message.ai ol {
  margin: 6px 0;
  padding-left: 22px;
}

.message.ai li {
  margin-bottom: 3px;
}

.message.ai p {
  margin: 0 0 8px 0;
}

.message.ai p:last-child {
  margin-bottom: 0;
}

.message.ai code {
  background: #f0f3f9;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.9em;
  color: #b23c5f;
}

.message.ai pre {
  background: #f0f3f9;
  border-radius: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  margin: 8px 0;
}

.message.ai pre code {
  background: none;
  padding: 0;
  color: inherit;
}

.message.ai blockquote {
  border-left: 3px solid #3280fc;
  margin: 8px 0;
  padding: 2px 12px;
  color: #5b6784;
}

.message.ai hr {
  border-color: #e3e8f0;
  margin: 10px 0;
}

.message.ai h1, .message.ai h2, .message.ai h3, .message.ai h4 {
  margin: 10px 0 6px 0;
  font-size: 1.05em;
}

/* El original usa un pseudo-elemento ::before con mask/gradiente pensado para
   fondo oscuro (borde degradado azul->transparente). Sobre fondo claro se ve
   como una mancha. Se anula ese pseudo-elemento y se usa un borde solido limpio. */
/* Botón de acción rápida: altura uniforme para todos (pedido de Eduardo,
   captura mostrando alturas distintas según si la etiqueta cabe en 1 o 2
   líneas -- "Detectar riesgos e inconsistencias"/"Dashboard de toma de
   decisiones" se ven mas altos que "Comparar dos archivos"/"Generar
   dashboard operativo"). min-height fijo para que todos midan lo mismo,
   independientemente de si el texto ocupa 1 o 2 líneas. */
.btn-custom-gradient {
  color: #33415c;
  border: 1.5px solid #c7d1e5;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(20, 33, 61, 0.05);
  /* 82px: medido en vivo como la altura real que necesita el texto de 2
     lineas ("Detectar riesgos e inconsistencias", "Dashboard de toma de
     decisiones") -- un min-height menor (76px) dejaba esos dos ligeramente
     mas altos que el resto en vez de parejo. */
  min-height: 82px;
}

/* Contenedor de cada acción rápida: relative para poder posicionar el icono
   de ayuda (esquina superior derecha) y su popover respecto a este bloque. */
#inicialQuickActions > div {
  position: relative;
}

/* Icono "i" de ayuda por botón de acción rápida (pedido de Eduardo): al
   pasar el mouse (title nativo del navegador) o al dar clic (popover propio,
   ver JS), muestra que hace la herramienta y que necesita para ejecutarse. */
/* Auditoria movil (Eduardo): el icono visible medía ~19x19px, por debajo
   del minimo recomendado (44x44) para objetivos tactiles -- dificil de
   tocar con precision en un dedo real. Se agranda el AREA TACTIL (touch
   target) sin agrandar el icono visualmente, con padding invisible
   aplicado siempre (no solo en movil, para consistencia y sin depender de
   detectar hover/tactil, que no es 100% confiable en todos los navegadores). */
.quick-action-help-btn {
  position: absolute;
  top: 2px;
  right: 4px;
  z-index: 2;
  border: 0;
  background: transparent;
  color: #9aa7c2;
  font-size: 15px;
  line-height: 1;
  padding: 8px;
  cursor: help;
}

.quick-action-help-btn:hover {
  color: #3280fc;
}

.quick-action-help-popover {
  position: absolute;
  top: 100%;
  right: 8px;
  margin-top: 6px;
  width: 260px;
  max-width: 80vw;
  background: #14213d;
  color: #ffffff;
  font-size: 12.5px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20, 33, 61, 0.25);
  z-index: 30;
  text-align: left;
}

.btn-custom-gradient::before {
  content: none !important;
  display: none !important;
}

.btn-custom-gradient:hover {
  color: #14213d;
  border-color: #3280fc;
  background: rgba(50, 128, 252, 0.05);
  box-shadow: 0 4px 10px rgba(50, 128, 252, 0.12);
}

.btn-custom-gradient i {
  color: #3280fc !important;
}

.btn-custom-gradient img {
  filter: none;
}

/* NOTA: se eliminó el chip circular (.synapse-logo-chip) que se había
   agregado antes -- diagnóstico incorrecto. synapse.svg YA es un logo
   circular completo (círculo azul + "S" blanca adentro), confirmado con
   captura real de Eduardo. Agregar OTRO círculo azul detrás duplicaba el
   badge y producía el efecto "se pierde"/difuminado en los bordes donde los
   dos azules no coincidían exacto. El logo se usa directo, sin envoltorio. */

/* ─── Marca en el header del sidebar EXPANDIDO (logo + wordmark) ──────────
   Pedido de Eduardo: logo minimalista (assets/synapse.svg) + texto
   "MLG Synapse IA" al lado, solo visible cuando el sidebar esta expandido
   (en el rail colapsado solo se ve el icono, ver #sidebarLogoToggle). */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* BUG REAL reportado por Eduardo con captura: color:#ffffff (blanco) sobre
   el fondo real del sidebar expandido (#f7f9fd, claro -- ver .sidebar mas
   abajo) era casi invisible. Corregido a color oscuro consistente con el
   resto del texto del sidebar (mismo tono que .sectionTitle/etc). */
.sidebar-brand-text {
  color: #14213d;
  font-family: Univers-Bold, sans-serif;
  font-size: 15px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* ─── Etiqueta informativa del agente activo en el sidebar (NO interactiva) ──
   Reemplaza el <select> real de cambio de agente (pedido de Eduardo: única
   forma real de cambiar agente debe ser el banner clic-eable arriba del
   chat, no duplicarlo aquí). Mismo estilo visual de "pill" que tenía el
   select, sin cursor de interacción. */
/* justify-content:center agregado (pedido de Eduardo: consistencia con los
   demas botones/bloques del sidebar centrados). */
.sidebar-active-agent-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #ffffff;
  border: 1px solid #c7d1e5;
  border-radius: 8px;
  color: #14213d;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", Univers-Regular, sans-serif;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
}

/* ─── Selector de agente: iconos emoji requieren fuente consistente ──*/
.agent-selector.form-select {
  background-color: #ffffff;
  border: 1px solid #c7d1e5;
  color: #14213d;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", Univers-Regular, sans-serif;
}

.agent-selector.form-select option {
  background: #ffffff;
  color: #14213d;
}

/* ─── Input tipo "Gemini" (search-pill) ───────────────────────────── */
.second .search-pill {
  background: #ffffff;
  border: 1.5px solid #c7d1e5;
  box-shadow: 0 4px 16px rgba(20, 33, 61, 0.1);
}

.second .search-pill:hover,
.second .search-pill:focus-within {
  box-shadow: 0 6px 20px rgba(50, 128, 252, 0.18);
  border-color: rgba(50, 128, 252, 0.35);
}

/* Input deshabilitado mientras se espera respuesta del agente (evita mandar
   varios mensajes en paralelo con respuestas que tardan 3-18s reales). */
.second .search-input input[type="text"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.second .control-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.second .placeholder,
.second .placeholder::placeholder {
  color: #14213d !important;
}

.second .placeholder::placeholder {
  color: #8a94ab !important;
}

.second .control-btn {
  color: #33415c;
}

.second .control-btn svg {
  fill: #33415c;
}

.second .btn.btn-primary.plus {
  color: #3280fc;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
}

/* Botón "+" rota 45° (se convierte visualmente en "×") mientras el menú de
   tools/adjuntar está abierto — antes se quedaba estático sin ningún feedback
   de que el menú seguía abierto. La clase .is-open la controla JS (ver
   listeners show.bs.collapse/hide.bs.collapse en index.html). */
.second .btn.btn-primary.plus.is-open {
  transform: rotate(45deg);
  color: #db0011;
}

/* ─── Menú "+" desplegable (adjuntar/tools) ─────────────────────────*/
/* También aplica a .collapsing (ver fix real en style.css: Bootstrap quita
   la clase .collapse durante la transición) para mantener el mismo estilo
   visual durante la animación, no solo en el estado final. */
#addTable.collapse,
#addTable.collapsing {
  background-color: #ffffff !important;
  border: 1px solid #dde3ef;
  box-shadow: 0 8px 24px rgba(20, 33, 61, 0.14);
  color: #14213d;
}

/* Bootstrap Collapse anima la ALTURA del contenedor mientras el menú abre.
   La versión anterior animaba ADEMÁS transform:translateY en cada item, lo
   que competía con ese cálculo de altura y causaba que el input de texto
   "brincara"/se sintiera trabado (reportado por Eduardo). Ahora es SOLO
   fade de opacidad (sin transform, sin afectar layout/altura durante la
   animación de Bootstrap), con un stagger más corto y sutil. */
#addTable .navbar-nav .nav-item {
  opacity: 0;
  animation: addTableItemIn 0.2s ease forwards;
}

#addTable.show .navbar-nav .nav-item:nth-child(1) { animation-delay: 0.05s; }
#addTable.show .navbar-nav .nav-item:nth-child(2) { animation-delay: 0.08s; }
#addTable.show .navbar-nav .nav-item:nth-child(3) { animation-delay: 0.11s; }
#addTable.show .navbar-nav .nav-item:nth-child(4) { animation-delay: 0.14s; }
#addTable.show .navbar-nav .nav-item:nth-child(5) { animation-delay: 0.17s; }
#addTable.show .navbar-nav .nav-item:nth-child(6) { animation-delay: 0.20s; }

@keyframes addTableItemIn {
  to {
    opacity: 1;
  }
}

#addTable .nav-link {
  color: #33415c !important;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

#addTable .nav-link:hover {
  background-color: rgba(50, 128, 252, 0.08);
  border-radius: 8px;
  transform: translateX(2px);
}

#addTable ul.dropdown-menu.show {
  background: #ffffff;
  color: #14213d;
  border-top: 1px solid #dde3ef;
  border-bottom: 1px solid #dde3ef;
}

#addTable ul.dropdown-menu .dropdown-item {
  color: #33415c;
}

#addTable ul.dropdown-menu .dropdown-item:hover {
  background-color: #f0f3f9;
  color: #14213d;
}

/* ─── Panel lateral de dashboard (split-screen) ─────────────────────*/
/* BUG REAL encontrado (reportado por Eduardo: "panel lateral derecho salido",
   línea de borde recta reapareciendo pese al rediseño): este bloque viejo
   definía border-left:1px solid duplicado con reglas más viejas que las de
   style.css. Como chat-light.css se carga DESPUÉS de style.css, esta regla
   ganaba por cascada y pisaba el border:none + colores del header nuevo del
   panel. Removido por completo — el estilo real del panel vive solo en
   style.css. */

/* Placeholder de "generando dashboard" cuando aún no hay contenido real */
.dashboard-inner .dashboard-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #8a94ab;
  gap: 12px;
  padding: 24px;
  text-align: center;
}

/* ─── Modal "olvidé contraseña" dentro del chat (por si se abre ahí) */
.modal-content {
  background-color: #ffffff !important;
  color: #14213d !important;
  box-shadow: 0 8px 24px rgba(20, 33, 61, 0.18);
}

.modal-header {
  border-bottom: 1px solid #dde3ef;
}

.btn-close-white {
  filter: none;
  opacity: 0.6;
}
/* ============================================================
   BLINDAJE DE AUTENTICACIÓN (defensa en profundidad)
   Sin importar qué dispare la transición visual (.first.open),
   el área de chat (.second) permanece invisible e inerte hasta
   que exista una autenticación REAL confirmada por app.js, que
   agrega la clase mlg-ia-authenticated al <body> únicamente tras
   una respuesta 200 del backend con token válido.
   ============================================================ */
body:not(.mlg-ia-authenticated) .second {
  visibility: hidden !important;
  pointer-events: none !important;
}