/* ============================================================
   MLG IA Orchestrator — Login claro/moderno (override quirúrgico)
   Objetivo: pantalla de login menos oscura, moderna pero simple.
   No se toca style.css original; solo se sobreescriben selectores
   de la pantalla de login (.panel-right / .bg-login2 / .tab-card).
   Se carga DESPUÉS de css/style.css.
   ============================================================ */

/* Fondo del panel de login: de negro sólido a degradado claro tipo Gemini */
.loginMain .row.first .panel-right.bg-login2 {
  background: linear-gradient(160deg, #f4f8ff 0%, #e9f2ff 45%, #dcebff 100%);
  color: #14213d;
}

/* La animación de canvas "synapse" se ve mal sobre fondo claro con líneas blancas;
   se atenúa en vez de quitarla (mantiene el efecto "vivo" sin ensuciar el fondo) */
.loginMain .row.first .panel-right canvas.synapse {
  opacity: 0.12;
  filter: grayscale(0.3);
}

/* Card de login: de tarjeta oscura a tarjeta blanca con sombra suave.
   Tamaño reducido (antes ocupaba casi toda la pantalla). */
.loginMain .tab-container {
  padding: 1rem;
}

.loginMain .tab-card {
  background: #ffffff;
  border: 1px solid rgba(20, 33, 61, 0.08);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(20, 33, 61, 0.12);
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
}

.loginMain .tab-card .card-body {
  padding: 1.75rem 2rem !important;
}

.loginMain .tab-card form.py-5 {
  padding-top: 1rem !important;
  padding-bottom: 0.5rem !important;
}

.loginMain .tab-card #btnIngresar {
  margin-top: 1.5rem !important;
}

.loginMain .tab-card h3,
.loginMain .tab-card p,
.loginMain .tab-card label {
  color: #14213d !important;
}

.loginMain .tab-card p.text-white {
  color: #4a5875 !important;
  font-size: 14px;
}

.loginMain .tab-card .form-label {
  color: #14213d;
  font-weight: 500;
}

.loginMain .tab-card .form-control {
  background: #f7f9fc;
  border: 1px solid #dde3ef;
  color: #14213d;
  border-radius: 10px;
}

.loginMain .tab-card .form-control:focus {
  border-color: #3280fc;
  box-shadow: 0 0 0 3px rgba(50, 128, 252, 0.15);
  background: #ffffff;
}

.loginMain .tab-card a,
.loginMain .tab-card a:hover {
  color: #3280fc;
}

/* Botón de ingresar: gradiente moderno, no el rojo institucional oscuro */
.loginMain .tab-card #btnIngresar,
.loginMain .tab-card .btn-main {
  background: linear-gradient(135deg, #3280fc 0%, #6aa8ff 100%);
  border: none;
  color: #ffffff;
  font-weight: 600;
  border-radius: 10px;
  padding: 10px 32px;
  box-shadow: 0 6px 16px rgba(50, 128, 252, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.loginMain .tab-card #btnIngresar:hover,
.loginMain .tab-card .btn-main:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(50, 128, 252, 0.35);
}

.loginMain .tab-card .powered {
  color: #8a94ab !important;
}

/* FIX RAPIDO (pedido de Eduardo): logo cambiado de mlg_ai_logo.png (logo
   distinto, con texto blanco pensado para fondo oscuro) al synapse.svg real
   (icono circular azul solido, sin texto, ya usado en el resto de la app).
   El chip oscuro rectangular ya no aplica -- el nuevo logo es un icono
   pequeno y solido que se ve bien directo sobre la tarjeta blanca. */
.loginMain .tab-card .loginLogo {
  max-width: 72px;
  margin: 0 auto 12px auto;
  display: block;
}

/* Ondas de "sinapsis" debajo del logo (pedido de Eduardo, referencia visual:
   waveform simetrico multicolor tipo espectrograma de audio). 3 ondas SVG
   con leve desfase de animacion + colores distintos (azul de marca + 2 tonos
   complementarios sutiles) para dar sensacion organica, sin saturar la
   pantalla de login (opacidad baja, altura reducida). */
.login-synapse-waves {
  display: block;
  width: 100%;
  max-width: 260px;
  height: 28px;
  margin: 0 auto 18px auto;
}

.login-synapse-waves .wave {
  fill: none;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  animation: loginWaveFloat 3.6s ease-in-out infinite;
}

.login-synapse-waves .wave-1 {
  stroke: #3280fc;
  opacity: 0.85;
  animation-delay: 0s;
}

.login-synapse-waves .wave-2 {
  stroke: #8a6aff;
  opacity: 0.55;
  animation-delay: 0.4s;
}

.login-synapse-waves .wave-3 {
  stroke: #6aa8ff;
  opacity: 0.35;
  animation-delay: 0.8s;
}

@keyframes loginWaveFloat {
  0%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.5);
  }
}

/* ============================================================
   Selector de agente (sidebar) — un usuario puede tener varios
   agentes asignados (Synapse, Orbit, Lex, Vector, ...)
   ============================================================ */
.agent-selector {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
}

.agent-selector:focus {
  outline: none;
  border-color: #3280fc;
  box-shadow: 0 0 0 3px rgba(50, 128, 252, 0.25);
}

.agent-selector option {
  background: #0b1b33;
  color: #ffffff;
}

/* ============================================================
   Chips de archivos adjuntos en el input de chat estilo Gemini
   ============================================================ */
.file-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 4px 0;
}

.file-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(50, 128, 252, 0.12);
  border: 1px solid rgba(50, 128, 252, 0.35);
  color: #14213d;
  border-radius: 20px;
  padding: 4px 10px 4px 12px;
  font-size: 12.5px;
  max-width: 220px;
}

.file-chip span.name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-chip span.size {
  color: #8a94ab;
  font-size: 11px;
  flex-shrink: 0;
}

/* Color del ícono según tipo de archivo (fileIconClass() en app.js) para
   distinguir Excel/PDF/Word de un vistazo en vez de un ícono genérico igual
   para todo. */
.file-chip .bi-file-earmark-excel {
  color: #1d7b4a;
}

.file-chip .bi-file-earmark-pdf {
  color: #c23b3b;
}

.file-chip .bi-file-earmark-word {
  color: #2b579a;
}

.file-chip .remove {
  cursor: pointer;
  opacity: 0.6;
  font-weight: bold;
}

.file-chip .remove:hover {
  opacity: 1;
}

/* Versión "flotante" de la lista de chips: vive SIEMPRE visible fuera del
   menú colapsable #addTable (antes se ocultaba al cerrar el menú —
   reportado por Eduardo). SEGUNDO FIX (reportado de nuevo: "el menú + baja
   la barra de texto"): antes vivía en flujo normal DENTRO de .wrap, que usa
   flexbox centrado verticalmente — cualquier crecimiento de altura ahí
   re-centraba TODO el layout (mensajes + input), dando la sensación de que
   "todo se mueve". Ahora es position:absolute respecto a .search-pill
   (que ya es position:relative), igual que #addTable — sale COMPLETAMENTE
   del cálculo de altura de .wrap, sin importar cuántos archivos se adjunten. */
.file-chip-list-floating {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  min-height: 0;
}

.file-chip-list-floating:empty {
  display: none;
}

.file-chip-list-floating .file-chip {
  background: #ffffff;
  border: 1px solid #c7d1e5;
  box-shadow: 0 4px 12px rgba(20, 33, 61, 0.1);
  max-width: 260px;
  animation: fileChipIn 0.22s ease;
}

@keyframes fileChipIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}