/* ==========================================================================
   Chat widget - frontend only (se conectará a un flujo de n8n vía webhook)
   ========================================================================== */

.chatbot-widget {
  position: fixed;
  right: 1.5em;
  bottom: 5em;
  z-index: 999;
  /* Ancla el tamaño de fuente del widget a 16px para que no herede los
     html { font-size: 60% / 58% / 55% } responsivos del sitio (styles.css).
     Sin esto, todos los "em" del chat (ancho, alto máximo, botones, texto)
     se encogían en mobile/tablet, rompiendo el layout y tapando el header. */
  font-size: 16px;
  font-family: "Poppins", "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

.chatbot-toggle {
  width: 3.6em;
  height: 3.6em;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, var(--color-primary, #17427a), var(--color-primary-dark, #0f2c52));
  color: #fff;
  font-size: 1.3em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-strong, 0 20px 45px rgba(15, 44, 82, 0.18));
  transition: transform 0.25s ease;
}

.chatbot-toggle:hover {
  transform: translateY(-3px);
}

.chatbot-toggle-icon-close {
  display: none;
}

.chatbot-widget.is-open .chatbot-toggle-icon-open {
  display: none;
}

.chatbot-widget.is-open .chatbot-toggle-icon-close {
  display: block;
}

.chatbot-panel {
  position: absolute;
  right: 0;
  bottom: 4.6em;
  width: 370px;
  max-width: calc(100vw - 2em);
  height: 520px;
  max-height: calc(100vh - 11em);
  max-height: calc(100dvh - 11em);
  background: #fff;
  border-radius: var(--radius, 14px);
  box-shadow: var(--shadow-strong, 0 20px 45px rgba(15, 44, 82, 0.18));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.chatbot-widget.is-open .chatbot-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.chatbot-header {
  position: static;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.8em;
  width: auto;
  height: auto;
  margin: 0;
  padding: 1em 1.1em;
  background: linear-gradient(135deg, var(--color-primary, #17427a), var(--color-primary-dark, #0f2c52));
  color: #fff;
  text-align: left;
  flex-shrink: 0;
  border-bottom: 3px solid var(--color-accent, #ff9f43);
}

.chatbot-avatar {
  width: 2.6em;
  height: 2.6em;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  object-fit: cover;
  background: rgba(255, 255, 255, 0.15);
  padding: 0.25em;
  box-shadow: var(--shadow-soft, 0 10px 30px rgba(15, 44, 82, 0.1));
}

.chatbot-header-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}

.chatbot-header-text strong {
  font-size: 0.98em;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.chatbot-header-text span {
  font-size: 0.75em;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 300;
}

.chatbot-close {
  width: 2.75em;
  height: 2.75em;
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  padding: 0;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.chatbot-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.25);
}

.chatbot-messages {
  flex: 1;
  padding: 1em;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  background: var(--color-bg, #f5f7fb);
}

.chatbot-msg {
  max-width: 82%;
  /* min-width:0 anula el "automatic minimum size" de flexbox: sin esto, un
     hijo ancho (ej. una tabla) ignora el max-width de arriba y la burbuja
     crece más allá del panel. No usar overflow-x:hidden aquí: eso obliga
     al navegador a convertir overflow-y en "auto" (regla del spec cuando
     un eje no es "visible" y el otro sí), y dentro de un contenedor
     flex-direction:column eso hace que CADA burbuja se comprima con su
     propio scroll vertical en vez de mostrarse completa. El scroll
     horizontal de contenido ancho (tablas) ya lo maneja la tabla misma. */
  min-width: 0;
  padding: 0.6em 0.85em;
  border-radius: 12px;
  font-size: 0.88em;
  line-height: 1.4;
  word-wrap: break-word;
}

.chatbot-msg--bot {
  align-self: flex-start;
  background: #fff;
  color: var(--color-text, #2b2f38);
  border-bottom-left-radius: 3px;
  box-shadow: var(--shadow-soft, 0 10px 30px rgba(15, 44, 82, 0.1));
}

.chatbot-msg--user {
  align-self: flex-end;
  background: var(--color-primary, #17427a);
  color: #fff;
  border-bottom-right-radius: 3px;
}

/* Markdown renderizado (marked.js) dentro de una burbuja del bot */
.chatbot-msg--bot > *:first-child {
  margin-top: 0;
}

.chatbot-msg--bot > *:last-child {
  margin-bottom: 0;
}

.chatbot-msg--bot p {
  margin: 0.5em 0;
}

.chatbot-msg--bot h1,
.chatbot-msg--bot h2,
.chatbot-msg--bot h3,
.chatbot-msg--bot h4 {
  margin: 0.7em 0 0.35em;
  line-height: 1.3;
  color: var(--color-primary, #17427a);
  font-weight: 600;
}

.chatbot-msg--bot h1 { font-size: 1.15em; }
.chatbot-msg--bot h2 { font-size: 1.08em; }
.chatbot-msg--bot h3 { font-size: 1.02em; }
.chatbot-msg--bot h4 { font-size: 0.96em; }

.chatbot-msg--bot strong {
  font-weight: 600;
}

.chatbot-msg--bot em {
  font-style: italic;
}

.chatbot-msg--bot ul,
.chatbot-msg--bot ol {
  margin: 0.5em 0;
  padding-left: 1.3em;
}

.chatbot-msg--bot li {
  margin: 0.2em 0;
}

.chatbot-msg--bot li > ul,
.chatbot-msg--bot li > ol {
  margin: 0.2em 0;
}

.chatbot-msg--bot a {
  color: var(--color-primary, #17427a);
  text-decoration: underline;
  word-break: break-word;
}

.chatbot-msg--bot a:hover {
  color: var(--color-accent, #ff9f43);
}

.chatbot-msg--bot code {
  background: var(--color-bg, #f5f7fb);
  border-radius: 4px;
  padding: 0.15em 0.4em;
  font-size: 0.92em;
  font-family: "Consolas", "Menlo", "Monaco", monospace;
}

.chatbot-msg--bot pre {
  background: var(--color-bg, #f5f7fb);
  border-radius: 8px;
  padding: 0.6em 0.7em;
  margin: 0.5em 0;
  overflow-x: auto;
}

.chatbot-msg--bot pre code {
  background: none;
  padding: 0;
}

.chatbot-msg--bot hr {
  border: 0;
  border-top: 1px solid #e7ebf2;
  margin: 0.7em 0;
}

/* Las burbujas del chat son angostas (max-width: 82% de un panel de ~370px,
   menos aún en mobile), así que una tabla normal de 2+ columnas nunca entra
   sin scroll horizontal. En vez de eso, la "apilamos": cada fila se muestra
   como una tarjeta y cada celda como "etiqueta: valor" (la etiqueta viene
   del encabezado de columna vía data-label, que setea chatbot.js). */
.chatbot-msg--bot table {
  display: block;
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin: 0.6em 0;
  font-size: 0.95em;
}

.chatbot-msg--bot thead {
  display: none;
}

.chatbot-msg--bot tbody {
  display: block;
}

.chatbot-msg--bot tr {
  display: block;
  margin-bottom: 0.6em;
  border: 1px solid #e7ebf2;
  border-radius: 8px;
  overflow: hidden;
}

.chatbot-msg--bot tr:last-child {
  margin-bottom: 0;
}

.chatbot-msg--bot th,
.chatbot-msg--bot td {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #e7ebf2;
  padding: 0.4em 0.6em;
  text-align: left;
  vertical-align: top;
}

.chatbot-msg--bot tr > :last-child {
  border-bottom: 0;
}

.chatbot-msg--bot td[data-label]::before {
  content: attr(data-label);
  display: block;
  font-size: 0.78em;
  font-weight: 600;
  color: var(--color-primary, #17427a);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 0.2em;
}

.chatbot-msg--bot blockquote {
  margin: 0.5em 0;
  padding: 0.2em 0.8em;
  border-left: 3px solid var(--color-accent, #ff9f43);
  color: var(--color-text-light, #6b7280);
}

.chatbot-quick-replies {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  align-self: flex-start;
  max-width: 90%;
}

.chatbot-chip {
  border: 1px solid var(--color-primary, #17427a);
  background: #fff;
  color: var(--color-primary, #17427a);
  border-radius: 20px;
  padding: 0.5em 0.9em;
  font-size: 0.82em;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.chatbot-chip:hover {
  background: var(--color-accent, #ff9f43);
  border-color: var(--color-accent, #ff9f43);
  color: #fff;
  transform: translateY(-2px);
}

.chatbot-typing {
  display: flex;
  align-items: center;
  gap: 0.3em;
  padding: 0 1em 0.6em;
  background: var(--color-bg, #f5f7fb);
}

.chatbot-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-light, #6b7280);
  opacity: 0.6;
  animation: chatbot-blink 1.2s infinite ease-in-out;
}

.chatbot-typing span:nth-child(2) {
  animation-delay: 0.2s;
}

.chatbot-typing span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes chatbot-blink {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.chatbot-input-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.8em;
  border-top: 1px solid #e7ebf2;
  flex-shrink: 0;
  background: #fff;
}

.chatbot-input-row input {
  flex: 1;
  border: 1px solid #dbe1ea;
  border-radius: 20px;
  padding: 0.6em 1em;
  font-family: inherit;
  font-size: 0.88em;
  color: var(--color-text, #2b2f38);
}

.chatbot-input-row input:focus {
  outline: none;
  border-color: var(--color-primary, #17427a);
}

.chatbot-send {
  width: 2.4em;
  height: 2.4em;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-primary, #17427a);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.chatbot-send:hover {
  background: var(--color-accent, #ff9f43);
}

.chatbot-send:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.chatbot-privacy-note {
  flex-shrink: 0;
  padding: 0 1em 0.8em;
  font-size: 0.72em;
  line-height: 1.4;
  color: var(--color-text-light, #6b7280);
  text-align: center;
  background: #fff;
}

.chatbot-privacy-note a {
  color: var(--color-primary, #17427a);
}

/* Tablet / mobile landscape (<768px): el panel ya es fluido por el
   max-width/max-height de arriba, solo evitamos que el ancho fijo de
   370px se acerque demasiado al borde del viewport. */
@media (max-width: 48em) {
  .chatbot-panel {
    width: min(370px, calc(100vw - 2em));
  }
}

/* Mobile (<480px): el panel ocupa el ancho disponible con márgenes y su
   alto se recalcula con la altura dinámica del viewport (dvh) para no
   quedar cortado por la barra de direcciones del navegador ni tapar el
   header al abrirse. */
@media (max-width: 30em) {
  .chatbot-widget {
    right: 1em;
    /* Deja despejado el botón "arriba" (styles.css), que en mobile queda
       fijo en ~65.6px de alto (bottom 24px + tamaño 41.6px). */
    bottom: 5.6em;
  }

  .chatbot-toggle {
    width: 3.2em;
    height: 3.2em;
    font-size: 1.15em;
  }

  .chatbot-panel {
    width: calc(100vw - 2em);
    max-width: calc(100vw - 2em);
    height: calc(100vh - 10em);
    height: calc(100dvh - 10em);
    max-height: calc(100vh - 10em);
    max-height: calc(100dvh - 10em);
    bottom: 4.1em;
  }
}