/*Fuentes*/
@font-face {
  font-family: "Univers-Regular";
  src: url("../fonts/UniversNextforHSBC-Regular.otf");
}

@font-face {
  font-family: "Univers-Bold";
  src: url("../fonts/UniversNextforHSBC-Bold.otf");
}

/*Generales*/
/* La línea vertical gris en el borde derecho de TODA la pantalla (reportada
   por Eduardo, visible incluso sin el panel de dashboard abierto) es el
   scrollbar del documento completo (html/body) activándose por un
   desbordamiento mínimo de .loginMain (height:100vh + bordes/box-sizing).
   El scroll real debe vivir SOLO dentro de .loginMain y sus hijos, nunca en
   el documento completo — así no aparece ningún scrollbar "de fondo" que no
   corresponda a un área de contenido real. */
html, body {
  overflow: hidden;
  height: 100%;
}

body {
  overflow-x: hidden;
  /* oculta scroll horizontal */
}

p,
li,
h2,
* {
  font-family: Univers-Regular, sans-serif;
}

button {
  font-family: Univers-Bold, sans-serif;
}

a {
  color: #db0011;
  font-family: Univers-Regular, sans-serif;
}

a:hover {
  color: #db0011;
}

.font {
  font-family: Univers-Regular, sans-serif;
}

.font-bold {
  font-family: Univers-Bold, sans-serif;
}

.red {
  color: #db0011;
}

.fs-10 {
  font-size: 8pt;
}

.fs-11 {
  font-size: 9pt;
}

.bg-red {
  background-color: #db0011;
}

.white {
  color: white;
}

.tab-container {
  /*background-color: #fff;*/
  padding: 2rem;
  display: flex;
  justify-content: center;
}

.btn-main {
  background-color: #0098ff;
  color: #fff;
  border: 1px solid #0098ff;
  border-radius: 0.375rem;
  padding: 0.8rem 1rem;
  transition: background-color 0.3s, color 0.3s;
  font-family: Univers-Regular, sans-serif;
  display: block;
  margin: 2rem auto 0 auto;
  text-align: center;
  white-space: nowrap;
  width: auto;
  min-width: 200px;

  padding: 6px 20px;
  font-size: 16px;
}

@media (max-width: 600px) {
  .btn-main {
    width: 100%;
    font-size: 1rem;
  }
}

@media (max-width: 500px) {
  .btn-main {
    padding: 0.5rem 0.7rem;
    font-size: 0.95rem;
  }
}

.btn-main:hover {
  border: 1px solid #0098ff;
  background-color: #000f1e;
  color: white;
  box-shadow: 1px 2px 2px #0098ff;
}

@media (max-width: 600px) {
  .btn-main {
    width: 100%;
    font-size: 1rem;
  }
}

@media (max-width: 500px) {
  .btn-main {
    width: 100%;
    font-size: 0.95rem;
  }
}

.z-index-100 {
  z-index: 1000;
  /* Un valor alto para garantizar que esté al frente */
}

.card-container {
  transition: transform 0.5s ease-in-out;
  display: flex;
  /* Convierte el contenedor de las tarjetas en un flexbox */
  align-items: stretch;
  /* Esto es clave: hace que todas las tarjetas se estiren a la misma altura */
}

.card {
  max-width: 800px;
  height: 100%;
  /* Asegura que la tarjeta ocupe toda la altura de su contenedor flex */
  /* background-color: #ffffff; */
  background: transparent;
  border: none;
  transition: transform 0.3s ease;
}

/*********************************************************************************************************************************************/

/* BUG REAL encontrado (línea residual/scrollbar visible junto al sidebar,
   reportado por Eduardo): había DOS bloques .loginMain en este archivo —
   este primero con overflow-y:auto (reactivaba scroll en el contenedor RAÍZ
   completo) y otro más abajo con overflow:hidden. Aunque el segundo gana por
   orden de cascada, consolidado en uno solo para eliminar la ambigüedad; el
   scroll real debe vivir SOLO en las áreas de contenido (chat, sidebar
   expandido), no en el contenedor raíz completo — así no aparece ningún
   scrollbar 'de fondo' separado visualmente del área real con contenido. */

@media (max-height: 749px) {
  .loginMain {
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

@media (max-width: 991px) {
  .loginMain {
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .loginMain .card {
    max-width: 100%;
    width: 100%;
  }
}

.loginLogo {
  /* max-width: 160px; */
  /* max-width: calc(80% - 60px); */
  max-width: calc(80% - 30px);
  margin: 30px auto 30px 10px;
  display: block;
}

/* .bg-login{
  background-color: #a1000f;
  background: url(../assets/login.png);
  background-size: cover;
  background-position: center;
} */

.bg-login {
  /* background-color: #131313; */
  background-color: #fff;
  background-size: cover;
  background-position: center;
  color: #3280fc;
}

.bg-login2 {
  background-color: #000f1e;
  background-color: #000;
  background-size: cover;
  background-position: center;
  color: #0098ff;
}

.align-center {
  align-content: center;
}

.loginMain a.link {
  color: #212529;
  text-decoration: none;
}

label {
  font-size: 13px;
}

select.form-select {
  padding-left: 40px;
  padding-right: 30px;
  text-align: center;
  background: url(../assets/arrow.svg), url(../assets/cal.svg);
  background-size: 12px, 20px;
  background-repeat: no-repeat, no-repeat;
  background-position: 95% center, 5% center;
}

/**********************************/

.wrap {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  box-sizing: border-box;
  flex-direction: column;
  gap: 24px;
}

h1.title {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  color: var(--accent);
  text-align: center;
}

/* barra "pill" */
.search-pill {
  width: min(920px, 92%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.08));
  border: 1px solid #444746;
  border-radius: 50px;

  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* icono izquierdo */
.left-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
}

.left-icon svg {
  width: 18px;
  height: 18px;
  opacity: 0.95;
  fill: var(--muted);
}

/* input-like area (no native input to allow placeholder + icons) */
.search-input {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  /* permite truncado del placeholder en contenedores flex */
  color: var(--accent);
}

.placeholder {
  color: #fff;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: transparent;
  cursor: pointer;
  width: 100%;
  height: 100%;

  border: 0px none;
}

.placeholder::placeholder {
  color: #fff;
}

.placeholder:focus {
  outline: 0 none;
  color: #fff;
}

/* derecha: mic + waveform */
.controls {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-left: 8px;
  flex-shrink: 0;
}

.control-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
  border: none;
  color: #fff;
}

.control-btn svg {
  width: 20px;
  height: 20px;
  fill: var(--muted);
}

/* efecto hover/focus */
.search-pill:hover,
.search-pill:focus-within {
  box-shadow: 0 10px 28px #444746;
  border-color: rgba(255, 255, 255, 0.06);
}

.control-btn:focus {
  outline: 2px solid rgba(255, 255, 255, 0.06);
  outline-offset: 2px;
  border-radius: 50%;
}

/* tamaño en móviles */
@media (max-width: 420px) {
  h1.title {
    font-size: 18px;
  }

  .search-pill {
    padding: 10px 12px;
    gap: 8px;
  }

  .placeholder {
    font-size: 15px;
  }

  .left-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }

  .control-btn {
    width: 36px;
    height: 36px;
  }
}

.bg-login2 .link-dark {
  color: #fff !important;
}

.mainBody.bg-login {
  background-color: #000;
  background: url(../assets/mlg_ai.jpg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.loginMain {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

/* FIRST encima */
.first {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  /* transition: transform 1s ease-in-out; */
  transition: all 1s ease-in-out;
  background-color: #000;
  opacity: 1;
}

/* Paneles animables */
.panel-left,
.panel-right {
  transition: transform 1s ease-in-out;
}

.panel-left {
  border-right: 1px solid #fff;
}

.panel-right {
  border-left: 1px solid #fff;
}

.panel-right .tab-container {
  max-height: 100dvh;
  overflow-y: auto;
}

/* Cuando se agrega la clase "open" */
.first.open {
  opacity: 0;
}

.first.open .panel-left {
  transform: translateX(-100%);
}

.first.open .panel-right {
  transform: translateX(100%);
}

@media (max-width: 767px) {
  .panel-left {
    height: 2px;
  }

  .sidebar .h-100 {
    height: auto !important;
  }

  .loginLogo {
    max-width: 50%;
    margin: 10px auto 10px 10px;
    display: block;
  }
}

.first .loginLogo {
  max-width: 80%;
  margin: 40px auto;
}

.powered {
  margin-top: 30px;
  margin-bottom: 0;
  text-align: center;
  color: #fff;
  font-size: 12px;
}

/* Vuelto a centrado (corrección del pedido anterior: Eduardo prefiere
   centrado para la leyenda y los botones del sidebar). */
.powered2 {
  margin-top: 0px;
  margin-bottom: 0;
  text-align: center;
  color: #fff;
  font-size: 12px;
}

/* ------------------------------------------------------------------------------- */

.chat-title {
  margin-bottom: 10px;
}

.chat-container {
  width: 400px;
  border: 1px solid #ccc;
  padding: 10px;
  height: 400px;
  overflow-y: scroll;
  margin-bottom: 10px;
}

.message {
  margin-bottom: 15px;
  padding: 16px;
  border-radius: 5px;
  white-space: pre-wrap;
  /* white-space: normal; */
  max-width: calc(100% - 60px);
  position: relative;
  color: #636363;
}

.user {
  background-color: #e6f7ff;
  /* background-color: rgba(0, 40, 85, 1); */
  /* background-color: #0098ff; */
  /* color: #fff; */
  /* BUG REAL reportado por Eduardo con captura: text-align:right sobre un
     mensaje largo multilínea (ej. los prompts predefinidos de las acciones
     rápidas, varios párrafos + listas numeradas) producía un efecto
     "desordenado"/irregular — cada línea terminando en un punto distinto,
     difícil de leer (como texto en espejo). Alineado a la derecha se ve bien
     SOLO para mensajes cortos de una línea. Fix: el texto siempre a la
     izquierda (lectura natural), la burbuja en sí se mantiene pegada al lado
     derecho de la pantalla via margin-left:auto (sigue siendo claramente
     "del usuario", solo el contenido interno se lee normal). */
  text-align: left;
  margin-left: auto;
  box-shadow: -1px 2px 2px 2px rgba(0, 0, 0, 0.1);
}

.ai {
  background-color: #f7f7f7;
  /* background-color: rgba(0, 40, 85, 0.8); */
  /* color: rgb(160, 174, 192); */
  /* color: #fff; */
  text-align: left;
  margin-right: auto;
  box-shadow: 1px 2px 2px 2px rgba(0, 0, 0, 0.1);
}

.user::after {
  content: "";
  position: absolute;
  right: -9px;
  bottom: 6px;
  width: 0;
  height: 0;
  border-left: 10px solid #e6f7ff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  filter: drop-shadow(2px 1px 1px rgba(0, 0, 0, 0.1));
}

.ai::after {
  content: "";
  position: absolute;
  left: -9px;
  bottom: 6px;
  width: 0;
  height: 0;
  border-right: 10px solid #f7f7f7;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  filter: drop-shadow(-2px 1px 1px rgba(0, 0, 0, 0.1));
}

.bg-login {
  max-height: 100%;
  overflow: auto;
}

.loader {
  display: block;
  margin: 10px auto;
  max-width: 60px;
}

label.form-label.small {
  color: #0098ff;
}

.first .card.tab-card h3 {
  color: #0098ff;
}

.modal-content {
  background-color: #000;
  color: #fff;
  box-shadow: 0 0 6px 0px rgba(0, 152, 255, 0.5);
}

/*  .modal-header{
  border-bottom: 0px none;
 } */

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

.modal-footer {
  border-top: 0px none;
}

.btn-close-white {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 1;
}

.second {
  background-color: #000;
  position: relative;
  /* NO hacer wrap: sin esto, cuando el panel de dashboard (640px) aparece y
     el chat ya ocupa casi todo el ancho, el panel no cabe en la fila y se
     va a la línea de ABAJO (bug reportado por Eduardo: "abre en una posición
     horrible", captura mostrando el panel ocupando la mitad inferior de la
     pantalla en vez de la mitad derecha). Con nowrap + el encogimiento del
     chat (regla .dashboard-open de abajo) los 3 paneles caben en una sola
     fila: sidebar | chat | panel, como en Gemini. */
  flex-wrap: nowrap;
}

/* Transición smooth del área de chat al encogerse/expandirse cuando el panel
   abre/cierra (complementa la animación del panel, para que TODO el split se
   mueva junto de forma fluida). */
.second .col-md-9.bg-login {
  transition: flex-basis 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Cuando el panel de dashboard está abierto, el área de chat se ENCOGE para
   dejarle espacio al panel (split real lado a lado), en vez de que el panel
   caiga debajo. La clase .dashboard-open la pone/quita JS al abrir/cerrar.
   BUG REAL #1 (animación "golpeada" reportada por Eduardo): antes este
   bloque usaba width:auto para el estado abierto. Una transición CSS NO
   puede interpolar hacia/desde "auto" — el navegador salta instantáneamente
   en ese tramo en vez de animar. Se cambió a un calc() fijo, pero eso
   introdujo:
   BUG REAL #2 (botón de cerrar panel invisible/cortado, reportado por
   Eduardo con captura): calc(100% - 56vw) restaba SOLO el ancho del panel,
   sin considerar el ancho real del sidebar (que varía: colapsado vs
   expandido, y es un %-based col-md-3, no un valor fijo). Sidebar + chat +
   panel terminaban sumando MAS que el 100% del contenedor .second, y el
   panel se desbordaba fuera del viewport real por la derecha — cortando el
   botón de cerrar, que vive al final del header.
   FIX REAL: flex:1 1 0 con min-width:0 hace que el chat ocupe exactamente
   el espacio que SOBRA después de sidebar+panel (sin necesitar calcular ese
   sobrante a mano, y sin depender de vw), y sigue siendo animable porque
   flex-basis SI interpola en una transición CSS (a diferencia de width:auto
   puro) gracias a la transition de flex-basis ya declarada más arriba en
   .second .col-md-9.bg-login. */
.second.dashboard-open .col-md-9.bg-login,
.second.dashboard-open .sidebar.collapsed+.col-md-9.bg-login {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

.first.open {
  z-index: 0;
}

.first.open+.second {
  z-index: 11;
}

.second .bg-login {
  background-color: #000;
  background-color: transparent;
  /* BUG REAL (captura + devtools de Eduardo): este border-left:1px solid #fff
     era la linea blanca visible entre el rail de iconos y el chat -- residuo
     del tema oscuro original (separaba visualmente sobre fondo #000; sobre el
     tema claro actual se ve como una linea blanca dura cortando el fondo
     continuo). Eliminado para que el fondo se vea continuo, como en Gemini. */
  border-left: none;
  border-right: 0 none;
  position: relative;
}

.second .bg-login app-chat-component {
  height: 100%;
  position: relative;
}

.second .bg-login .row {
  height: 100%;
}

.message {
  width: fit-content;
}

.message.ai.animation {
  width: 100%;
  background-color: transparent;
}

.message.ai.animation img {
  filter: drop-shadow(0px 0px 2px rgba(255, 255, 255, 0.5));
}

.message.ai.animation::after {
  display: none;
}

.synapse {
  /* position: absolute; */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.synapse+div {
  z-index: 3;
}

main {
  padding: 0 12px;
}

@media (max-width: 767px) {
  .loginLogo {
    max-width: unset;
    width: auto;
    height: 40px;
    margin: 10px auto 10px 10px;
    display: block;
  }

  .first.open+.second {
    max-height: calc(100dvh);
    overflow-y: auto;
  }

  .second .bg-login {
    min-height: calc(100% - 185px);
    height: calc(100% - 185px);
    border-left: 0 none;
    margin-top: 185px;
  }

  /* BUG REAL (auditoria movil, Eduardo: "se muestra una barra de color
     azul entre la barra lateral y la zona central"): este box-shadow
     residual (probablemente de una etapa de debug visual, nunca
     limpiado) pintaba un resplandor azul alrededor de TODO el sidebar,
     incluido el borde derecho -- exactamente la linea reportada. Se quita
     por completo, sin ningún reemplazo (no aporta separacion visual
     intencional; el limite real entre sidebar y chat ya lo da el cambio
     de tono de fondo, ver chat-light.css). */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
  }
}

@media (min-width: 768px) {
  .sidebar div.collapse {
    height: calc(100dvh - 200px);
  }
}

.sidebar {
  background-color: #000;
}

.col-md-3.sidebar {
  max-height: 100vh;
  position: sticky;
  top: 0
}

/* Reducir el ancho del sidebar EXPANDIDO (pedido de Eduardo: "muy ancha" --
   el col-md-3 de Bootstrap son 25% del ancho total, genuinamente amplio en
   pantallas grandes). Ancho fijo mas razonable, patron similar a
   Gemini/ChatGPT (~280px), en vez de un porcentaje que crece sin limite en
   monitores anchos. El chat (.col-md-9) usa flex:1 1 0 para ocupar
   automaticamente el espacio restante real, sin dejar hueco vacio (mismo
   patron ya usado para el panel de dashboard). */
.col-md-3.sidebar:not(.collapsed) {
  flex: 0 0 280px;
  max-width: 280px;
  width: 280px;
  /* BUG REAL reportado por Eduardo con captura + devtools: aparecia una
     barra de scroll horizontal no deseada dentro del sidebar cuando un
     nombre de agente/chat largo se acercaba al ancho reducido (280px).
     overflow-x:hidden explicito evita que cualquier contenido interno
     desborde horizontalmente y dispare scroll -- los elementos internos
     (titulos, botones, nombres de chat) ya truncan con ellipsis donde
     corresponde, así que nada se pierde, solo se evita el scroll feo. */
  overflow-x: hidden;
}

.col-md-3.sidebar:not(.collapsed) + .col-md-9.bg-login {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

@media(min-width: 768px) {
  .sidebar div.collapse {
    overflow-y: auto
  }
}

.sidebar div.collapse {
  height: calc(100dvh - 200px);
  overflow-y: auto;
  overflow-x: hidden;
}



/* AJUSTE REAL (corrección del pedido anterior: Eduardo prefiere centrado, no
   izquierda, para la leyenda y los botones del sidebar). Se mantenía
   text-align:justify (se veía descuidado en un parrafo corto); ahora center
   coincide con lo pedido por Eduardo. */
.advice2 {
  text-align: center;
  color: #fff;
  font-size: 10px;
  margin: 0;
  padding: 0;
  border: 0
}


.message {
  scroll-margin-bottom: 280px;
  /* ajusta el valor */
}

@media (max-width: 767px) {
  .sidebar div.collapse {
    height: calc(100dvh - 280px);
    overflow-y: auto;
  }

  .col-md-9.align-self-start>.wrap {
    padding-bottom: 10px;
  }

  .col-md-9.align-self-end>.wrap {
    padding-top: 10px;
  }

  .second .bg-login {
    margin-top: 0;
    min-height: calc(100dvh - 246px);
    height: calc(100dvh - 246px);
  }

  .message {
    font-size: 13px;
  }
}

@media (max-width: 508px) {
  .second .bg-login {
    margin-top: 0;
    min-height: calc(100dvh - 261px);
    height: calc(100dvh - 261px);
  }
}

@media (max-width: 351px) {
  .second .bg-login {
    margin-top: 0;
    min-height: calc(100dvh - 276px);
    height: calc(100dvh - 276px);
  }
}


.wrap.wrap-admin {
  text-align: left;
  justify-content: flex-start;
}

h1.section-title {
  text-align: left;
}

.wrap-admin .main-container {
  max-width: 100%;
}

.admin-card {
  background: rgba(255, 255, 255,
      1);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 16px;
}


.admin-card table {
  border-radius: 8px;
  overflow: hidden;
}

.admin-card th {
  background-color: #000;
  color: #fff;
}

.admin-card tr:nth-child(odd) td {
  background-color: #fff;
  color: #000;
}

.admin-card tr:nth-child(even) td {
  background-color: rgba(0, 152, 255, 0.2);
  color: #000;
}

.modal-content.bg-white h5.modal-title {
  color: #3280fc;
}

.modal-content.bg-white label {
  color: #000;
}

.btn.btn-primary.outline {
  background-color: transparent;
  color: #0098ff;
  border: 1px solid #0098ff;
}

/* Botón "Nuevo chat" (sidebar): antes el ícono+texto quedaban alineados a la
   izquierda dentro del ancho completo del botón (bug reportado por Eduardo
   — texto descentrado). Fix: flex real centrando ícono+texto como grupo. */
#btnNewChat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.btn.btn-primary.outline:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.activateUser .form-check-input+label.form-check-label::after {
  display: block;
  max-width: 90px;
}

.activateUser .form-check-input+label.form-check-label::after {
  content: "Inactivo";
  min-width: 60px;
  font-size: 16px;
  display: block;
  text-align: left;
}

.activateUser .form-check-input:checked+label.form-check-label::after {
  content: "Activo";
}

.modal .form-select {
  background-color: #fff;
  text-align: left;
  padding: 6px 30px 6px 12px;
  background-image: url(../assets/arrow.svg);
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: 95% center;
}

.icon-modal {
  font-size: 60px;
}

.pagination .page-link {
  font-size: 12px;
  padding: 4px 8px;
}

/* Nuevos estilos 260508*/

.dashboardInfo {
  color: #fff;
  line-height: 1;
}

.dashboardInfo span {
  font-size: 10px;
}

.nav-link.see-more {
  font-size: 12px;
  color: #0098ff !important;
}

/* AJUSTE REAL (pedido de Eduardo: homologar UX del sidebar): antes el
   selector era SOLO .nav-item .sectionTitle, así que "Chats" (dentro de un
   <li class="nav-item">) tenía la raya decorativa debajo pero "Agente
   activo" (dentro de un <div>, sin envoltura .nav-item) no la heredaba --
   inconsistencia visual entre dos títulos de sección que deberían verse
   igual. Selector ampliado para aplicar la clase directamente, sin
   depender del contenedor padre. */
.sectionTitle {
  margin-bottom: 8px;
  padding: 8px 16px 4px 16px;
  position: relative;
}

.sectionTitle::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 50%;
  display: block;
  height: 1px;
  width: 50%;
  background-color: #0098ff;
}

.sidebar div.collapse {
  scrollbar-color: #c7d1e5 transparent;
  scrollbar-width: thin;
}

.nav-link .download {
  width: 20px;
  height: 20px;
  display: block;
}

.search-pill {
  position: relative;
}

/* BUG REAL encontrado (reportado 2 veces por Eduardo, persistía incluso en
   incógnito sin caché): Bootstrap Collapse QUITA la clase .collapse y la
   reemplaza TEMPORALMENTE por .collapsing durante la animación de apertura/
   cierre (no las tiene ambas a la vez). El selector de abajo era
   "#addTable.collapse" — así que durante esos ~350ms de transición el menú
   perdía position:absolute (por no tener ya la clase .collapse) y caía al
   flujo normal del documento, empujando TODO el layout hacia abajo; al
   terminar la animación volvía a .collapse.show y saltaba de vuelta a
   absoluto. Eso era el "se levanta todo el campo, luego solo el menú".
   Fix: aplicar position:absolute también a la clase .collapsing, para que
   NUNCA esté en flujo normal durante ningún estado de la transición. */
#addTable.collapse,
#addTable.collapsing {
  border: 1px solid #0098ff;
  border-radius: 20px;
  bottom: 100%;
  left: 0;
  position: absolute;
  background-color: #000;
  padding: 8px 16px;
  color: #fff;
  font-size: 13px;
}


.col-md-3.sidebar.collapsed {
  flex: 0 0 auto;
  width: 60px;
  position: relative;
}

.col-md-3.sidebar.collapsed {
  flex: 0 0 auto;
  width: 60px;
}

.col-md-3.sidebar>#collapsedsidebar {
  display: none !important;
  justify-content: space-between;
}

.col-md-3.sidebar.collapsed>#collapsedsidebar {
  display: flex !important;
}

.col-md-3.sidebar.collapsed>#fullsidebar {
  display: none !important;
}

.sidebarHomeLink {
  width: 100%;
  height: auto;
  margin: 30px 0 10px;
}

.sidebarLink {
  width: 25px;
  height: auto;
  margin: 10px auto;
  display: block;
}


/* DEAD CODE (referencia Gemini/Claude, pedido de Eduardo): el boton chevron
   separado para abrir/cerrar el sidebar ya no existe en el HTML -- el logo
   Synapse (rail colapsado) y el icono de cerrar (sidebar expandido) son ahora
   el propio control (ver .sidebar-logo-toggle en chat-light.css + listeners
   #sidebarLogoToggle/#sidebarCollapseToggle). Reglas conservadas comentadas
   por si se necesita revertir, pero no aplican a ningun elemento hoy. */
/*
.sidebar .btn.btn-section-toggler {
  border: 0;
  position: absolute;
  top: 0;
  left: calc(100% + 1px);
  color: #fff;
  background-color: #000;
  border-radius: 0;
}

.sidebar .btn.btn-section-toggler svg {
  height: 20px;
  width: 20px;
  transform: rotate(180deg);
  transition: all 0.4s ease;
}

.sidebar.collapsed .btn.btn-section-toggler svg {
  transform: rotate(0deg);
}
*/

/* ─── Panel de resultados (split-screen) — REDISEÑO tipo Gemini/Claude ──────
   Reportado por Eduardo: "se ve muy burdo", "el sitio debe ser dinámico y
   poner tu campo de texto más pequeño dividiendo la pantalla" (con captura
   de referencia de Gemini: panel claro con header propio, split real que
   ACHICA el área de chat en vez de superponerse encima).
   Antes: position:absolute flotando SOBRE el chat (overlay), fondo negro
   (#000) que chocaba con el HTML de fondo oscuro que el agente ya genera —
   texto/tablas casi invisibles por fondo-sobre-fondo oscuro.
   Ahora: participa del layout flex real (position:relative, no absolute),
   así que cuando se expande literalmente REDUCE el espacio disponible para
   el chat (split real, no overlay); fondo claro consistente con el resto
   de la app; header propio con título + acciones siempre visibles. */
.dashboard-viewer {
  position: relative;
  flex: 0 0 auto;
  /* Un poco MÁS GRANDE que la conversación (referencia Gemini: el panel del
     artefacto domina más que el chat). ~55% del ancho disponible. */
  width: 56vw;
  height: 100dvh;
  max-width: 60vw;
  min-width: 420px;
  background-color: #ffffff;
  /* División clara y sutil, redondeada (referencia de Gemini): en vez de un
     borde recto duro, un margen pequeño + esquinas redondeadas en el lado
     que da hacia el chat, simulando dos paneles independientes separados
     por un espacio en vez de una línea dura pegada. */
  border-radius: 16px 0 0 16px;
  border: 1px solid #e3e8f0;
  border-right: none;
  margin: 10px 0 10px 8px;
  /* Animación más smooth (curva ease más suave y un pelín más larga). */
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              max-width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              margin 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  display: flex;
  flex-direction: column;
  box-shadow: -6px 0 28px rgba(20, 33, 61, 0.08);
}

.dashboard-viewer.collapsed {
  width: 0px;
  max-width: 0px;
  /* BUG REAL #2 (encontrado con devtools por Eduardo, persistía tras el fix
     de box-shadow): la regla base .dashboard-viewer define min-width:420px,
     y .collapsed nunca lo anulaba. Un flex item respeta su min-width por
     encima de width/max-width:0 -- por eso el panel seguía reservando
     espacio real en el layout (la "línea/franja" visible en el borde
     derecho, con el chat empujado, aun con el panel "cerrado"). Fix: anular
     min-width también en el estado colapsado. */
  min-width: 0px;
  margin-left: 0;
  border: none;
  overflow: hidden;
  /* BUG REAL #1: aunque el ancho llega a 0, el box-shadow de -6px definido en
     .dashboard-viewer se sigue pintando en esa posición (la sombra no depende
     del ancho del elemento, solo de su borde). Eso era la "línea del lado
     derecho como si el dashboard se quisiera mostrar a medias" reportada por
     Eduardo, visible incluso con el panel totalmente cerrado. Se anula
     explícitamente en el estado colapsado. */
  box-shadow: none;
}

.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #e3e8f0;
  background: #f7f9fd;
  border-radius: 16px 0 0 0;
  flex-shrink: 0;
}

.dashboard-header-title {
  font-size: 14px;
  font-weight: 700;
  color: #14213d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.dashboard-viewer .btn.btn-section-toggler,
.dashboard-viewer .btn.btn-dashboard-action {
  border: 0;
  position: static;
  color: #33415c;
  background-color: transparent;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 16px;
  line-height: 1;
}

.dashboard-header-sep {
  width: 1px;
  height: 20px;
  background: #dde3ef;
  margin: 0 2px;
}

/* Pestaña flotante para reabrir el panel cuando está cerrado (pegada al borde
   derecho, verticalmente centrada). Solo visible cuando hay un artefacto
   generado pero el panel está colapsado (controlado por JS). */
.dashboard-reopen-tab {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 30;
  width: 34px;
  height: 56px;
  border: 1px solid #e3e8f0;
  border-right: none;
  border-radius: 12px 0 0 12px;
  background: #ffffff;
  color: #3280fc;
  font-size: 18px;
  box-shadow: -4px 0 16px rgba(20, 33, 61, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, width 0.15s ease;
}

.dashboard-reopen-tab:hover {
  background: #eef5ff;
  width: 38px;
}

/* Botón flotante para reabrir las "Herramientas avanzadas IA MLG" en
   cualquier punto de la conversación (pedido de Eduardo). Posicion fija
   sobre el chat, esquina inferior derecha, encima del input. */
/* Fondo BLANCO (no degradado azul): el icono ahora es el logo real
   assets/synapse.svg, que ya es azul (#09f) -- sobre fondo azul se veria
   invisible, igual que el bug del wordmark del sidebar. Blanco + sombra da
   el mismo look "boton flotante" sin perder el logo. */
.quick-actions-fab {
  position: fixed;
  bottom: 100px;
  right: 32px;
  z-index: 25;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid #e3e8f0;
  background: #ffffff;
  color: #3280fc;
  font-size: 22px;
  box-shadow: 0 6px 20px rgba(20, 33, 61, 0.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quick-actions-fab:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 26px rgba(50, 128, 252, 0.45);
}

/* Indicador visual del FAB: dos estados de glow distintos (pedido de
   Eduardo).
   - .attention: parpadeo PERMANENTE y continuo mientras hay conversacion
     activa y el menu esta CERRADO (los 5 botones del inicio ya no se ven) --
     llama la atencion de que las herramientas siguen disponibles ahi.
   - .active: glow fijo (sin parpadeo) mientras el menu esta ABIERTO -- el
     usuario ya lo esta viendo, no hace falta seguir llamando la atencion.
   Las clases se alternan por JS (ver toggleQuickActionsFabVisibility y los
   listeners de quickActionsFab/closeQuickActionsFabMenu). */
.quick-actions-fab.attention {
  animation: quickActionsFabPulse 1.8s ease-in-out infinite;
}

.quick-actions-fab.active {
  box-shadow: 0 6px 20px rgba(50, 128, 252, 0.35), 0 0 0 6px rgba(50, 128, 252, 0.12);
}

@keyframes quickActionsFabPulse {
  0%, 100% {
    box-shadow: 0 6px 20px rgba(50, 128, 252, 0.25), 0 0 0 0 rgba(50, 128, 252, 0.35);
  }
  50% {
    box-shadow: 0 6px 20px rgba(50, 128, 252, 0.35), 0 0 0 8px rgba(50, 128, 252, 0);
  }
}

.quick-actions-fab-menu {
  position: fixed;
  bottom: 162px;
  right: 32px;
  z-index: 26;
  width: 320px;
  max-width: calc(100vw - 48px);
  background: #ffffff;
  border: 1px solid #e3e8f0;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(20, 33, 61, 0.18);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 60vh;
  overflow-y: auto;
}

/* Fila del menu FAB: botón de acción (crece) + botón de ayuda "i" al lado
   (pedido de Eduardo, punto 4: mismo patron que el bloque de inicio). */
.quick-actions-fab-menu-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

.quick-actions-fab-menu-item {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: #14213d;
  cursor: pointer;
  min-width: 0;
}

.quick-actions-fab-menu-item:hover {
  background: #eef5ff;
}

.quick-actions-fab-menu-item i,
.quick-actions-fab-menu-item img {
  color: #3280fc;
  flex-shrink: 0;
}

.quick-actions-fab-help-btn {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: #9aa7c2;
  font-size: 15px;
  padding: 4px 8px;
  cursor: help;
}

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

.dashboard-viewer .btn.btn-dashboard-download {
  border: 0;
  position: static;
  top: auto;
  right: auto;
  color: #33415c;
  background-color: transparent;
  border-radius: 8px;
  padding: 6px 8px;
}

/* Flecha del botón de cerrar el panel: bi-chevron-right (→) apunta hacia
   AFUERA (a la derecha, hacia el borde de la pantalla) para indicar "cerrar/
   empujar el panel hacia afuera" — antes se rotaba 180° y apuntaba hacia
   adentro (←), que Eduardo reportó como "al revés". Sin rotación = correcto. */
.dashboard-viewer .btn.btn-section-toggler svg {
  height: 18px;
  width: 18px;
  transform: rotate(0deg);
  transition: all 0.35s ease;
}

.btn.btn-section-toggler:hover {
  color: #000;
  background-color: #fff;
}

.dashboard-viewer .btn.btn-section-toggler:hover,
.dashboard-viewer .btn.btn-dashboard-download:hover,
.dashboard-viewer .btn.btn-dashboard-action:hover {
  color: #14213d;
  background-color: #eef2f9;
}


.btn.btn-primary.plus {
  font-size: 30px;
  padding: 4px;
  line-height: 1;
  border: 0 none;
  border-radius: 50%;
  background-color: transparent;
  color: #0098ff;
}

.sidebar.collapsed+.col-md-9.bg-login {
  flex: 0 0 auto;
  width: calc(100% - 90px);
}

.dashboard-inner {
  width: 100%;
  flex: 1 1 auto;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 0 0 0 16px;
}

.dashboard-inner .dashboard {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top center;
}

#inicial {
  max-width: 600px;
  margin: 0 auto;
}

.txt-1 {
  font-size: 30px;
  color: #fff;
  text-align: center;
}

.txt-2 {
  font-size: 22px;
  color: #0098ff;
  text-align: center;
}

.txt-3 {
  color: #fff;
  text-align: center;
}



.btn-custom-gradient {
  position: relative;
  background: transparent;
  color: #a0aec0;
  border: none;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 15px;
  text-align: left;
  transition: all 0.3s ease;
}

.btn-custom-gradient img {
  height: 36px;
  width: 24px;
}


.btn-custom-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px 0 0 20px;
  padding: 1.5px;
  background: linear-gradient(to right, #0098ff, transparent);
  /* Azul a transparente */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

}

.btn-custom-gradient i {
  color: #0098ff;
  font-size: 1.5rem;
}

.btn-custom-gradient:hover {
  color: #fff;
  filter: brightness(1.2);
}



/* Scrollbar global sutil (antes era azul brillante #0098ff sobre fondo negro
   #000 aplicado a TODO con `*` — esa era "la línea azul horrible" que Eduardo
   reportó en la división entre el chat y el panel: en realidad era el
   scrollbar de esos contenedores. Ahora gris muy tenue sobre transparente,
   como Gemini/apps modernas). */
* {
  scrollbar-color: transparent transparent;
  scrollbar-width: thin;
}

*:hover {
  scrollbar-color: #c7d1e5 transparent;
}

/* Scrollbar webkit (Chrome/Safari/Edge) a juego, también sutil.
   Pedido explicito de Eduardo: las barras de scroll deben ser transparentes
   por defecto (invisibles en reposo, como Gemini) y solo asomar levemente al
   pasar el mouse sobre el contenedor con scroll, no permanecer siempre
   visibles. */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 8px;
}

*:hover::-webkit-scrollbar-thumb {
  background: #c7d1e5;
}

*::-webkit-scrollbar-thumb:hover {
  background: #a9b6d0;
}


@media (max-width: 767px) {

  .second .bg-login {
    margin-top: 0;
    min-height: calc(100dvh) !important;
    height: calc(100dvh) !important;
  }

  /* BUG REAL (auditoria movil, Eduardo): al abrir el sidebar completo en
     movil, el banner "Hablando con..." (position:sticky, z-index:20,
     vive en .second/.bg-login) se dibujaba ENCIMA del sidebar (fixed, sin
     z-index propio -> z-index:auto), tapando el logo/boton de cerrar la
     barra lateral en la esquina superior izquierda. Fix quirurgico SOLO
     movil: z-index explicito mayor al del banner cuando el sidebar esta
     expandido (no colapsado, para no afectar el rail de iconos ni el
     comportamiento en desktop). */
  .sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    max-width: calc(100dvw - 120px);
    margin-left: 0px !important;
    height: 100dvh;
  }

  .col-md-3.sidebar:not(.collapsed) {
    z-index: 30;
  }


  /* BUG REAL (auditoria movil, Eduardo): esta regla quedaba de un diseño
     viejo del panel (overlay negro, ancho fijo 600px, position:absolute) que
     nunca se actualizo cuando el panel se rediseño a "split real" con fondo
     claro (ver comentario arriba de .dashboard-viewer base). En viewport de
     390px (iPhone), 600px de ancho fijo hacia desbordar el panel ~41px fuera
     de pantalla por la izquierda, cortando el texto de las tarjetas KPI
     ("Ventas Totales" se veia como "ntas Totales", etc. -- confirmado con
     getBoundingClientRect: left:-41, width:420, en viewport de 390).
     Fix: en movil no tiene sentido dividir la pantalla en 2 columnas: el
     panel pasa a pantalla completa (overlay real sobre el chat) cuando esta
     abierto, y el chat vuelve a verse al cerrarlo. */
  .dashboard-viewer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 100vw;
    min-width: 0;
    height: 100dvh;
    background-color: #ffffff;
    border: none;
    border-radius: 0;
    margin: 0;
    transition: transform 0.35s ease;
    transform: translateX(0);
    padding: 0;
    z-index: 1050;
  }

  .dashboard-viewer.collapsed {
    width: 100vw;
    max-width: 100vw;
    min-width: 0;
    transform: translateX(100%);
    box-shadow: none;
  }

  .dashboard-header {
    border-radius: 0;
  }

  /* BUG REAL (auditoria movil, Eduardo): el rail colapsado reservaba 90px
     fijos en movil (mas el propio ancho del rail, ~60px medido con
     getBoundingClientRect), dejando muy poco espacio real para el chat --
     el campo de texto quedaba comprimido a ~77px de ancho en un iPhone de
     390px, truncando el placeholder "Pregunta lo que quieras" a
     "Pregunt...". Fix: reducir el rail a 44px en movil (solo iconos, sin
     aire extra) y descontar exactamente eso del margen del chat. */
  .col-md-3.sidebar.collapsed {
    width: 44px;
  }

  .sidebar.collapsed+.col-md-9.bg-login {
    flex: 0 0 auto;
    width: calc(100% - 44px);
    margin-left: 44px;
  }

  .col-md-3.sidebar.collapsed>#collapsedsidebar {
    padding-left: 0;
    padding-right: 0;
  }

  .col-md-3.sidebar.collapsed .sidebar-icon-btn {
    width: 44px;
  }

  .sidebar .collapse.d-md-block {
    display: block;
  }

  .sidebar .h-100 {
    height: 100% !important;
  }

  /* Complemento del fix del rail (arriba, 90px -> 44px): el placeholder
     todavia se ve parcialmente truncado ("Pregunta lo qu...") en pantallas
     muy angostas. Reducir un poco el tamano de fuente del placeholder en
     movil gana el espacio suficiente para mostrarlo completo sin cambiar el
     layout ni el tamano real del campo. */
  .search-input .placeholder,
  .search-input input[type="text"]::placeholder {
    font-size: 14px;
  }

}

.message.ai.animation {
  width: 100%;
  background-color: transparent;
  white-space: normal;
}

.message.ai.animation p.txt-white {
  font-size: 12px;
  margin-bottom: 0;
}

.message.ai.animation img.loader {
  filter: none;
  margin: 0;
  height: 5px;
  width: auto;
}

.message.ai.animation::after {
  display: none;
}

#addTable ul.dropdown-menu.show {
  position: relative !important;
  background: #000;
  color: #fff;
  transform: none !important;
  padding-top: 0;
  padding-bottom: 0;
  border-top: 1px solid #0098ff;
  border-bottom: 1px solid #0098ff;
  border-radius: 0;
}

#addTable ul.dropdown-menu .dropdown-item {
  font-size: 12px;
  color: #fff;
}

#addTable ul.dropdown-menu .dropdown-item:hover {
  background-color: #000;
  color: #fff;
}

.link-dark.txt-small{
  font-size: 13px;
}