/* Asistente Gromanti, sobre @n8n/chat 1.43.1 (no actualizar sin probar). */
@import url('https://cdn.jsdelivr.net/npm/@n8n/chat@1.43.1/dist/style.css');

/* Todo en px: el sitio tiene html { font-size: 10px } (Bootstrap 3). */
:root {
  --chat--color--primary: #004070;
  --chat--color--primary-shade-50: #00365f;
  --chat--color--primary--shade-100: #002c4d;
  --chat--color--secondary: #004070;
  --chat--color-secondary-shade-50: #253544;
  --chat--color-light: #f4f6f9;
  --chat--color-light-shade-50: #e3e8ee;
  --chat--color-light-shade-100: #d5dce4;
  --chat--color-dark: #253544;
  --chat--color-disabled: #b7c0ca;
  --chat--color-typing: #4e4e4e;

  --chat--spacing: 16px;
  --chat--border-radius: 18px;
  --chat--transition-duration: 0.2s;
  --chat--font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

  --chat--window--bottom: 76px; /* arriba de a.page-scroll */
  --chat--window--right: 20px;
  --chat--window--z-index: 1000; /* debajo de los modales de Bootstrap */
  --chat--window--border-radius: 16px;

  --chat--header--padding: 18px 22px;
  --chat--header--background: #004070;
  --chat--header--color: #fff;
  --chat--heading--font-size: 20px;
  --chat--subtitle--font-size: 14px;
  --chat--subtitle--line-height: 1.5;

  --chat--message--font-size: 16px;
  --chat--message--padding: 12px 16px;
  --chat--message-line-height: 1.55;
  --chat--message--margin-bottom: 8px;
  --chat--message--bot--background: #fff;
  --chat--message--bot--color: #4e4e4e;
  --chat--message--bot--border: 1px solid #e3e8ee;
  --chat--message--user--background: #004070;
  --chat--message--user--color: #fff;
  --chat--message--pre--background: rgba(0, 64, 112, 0.06);
  --chat--messages-list--padding: 20px;

  --chat--toggle--size: 60px;
  --chat--toggle--background: #004070;
  --chat--toggle--hover--background: #00365f;
  --chat--toggle--active--background: #002c4d;
  --chat--toggle--color: #fff;

  --chat--textarea--height: 46px;
  --chat--textarea--max-height: 160px;
  --chat--input--font-size: 16px; /* menos de 16px hace zoom en iOS */
  --chat--input--padding: 11px 14px;
  --chat--input--background: transparent; /* si no, tapa el borde redondeado del contenedor */
  --chat--input--text-color: #111111;
  --chat--input--left--panel--width: 32px;
  --chat--input--container--background: #fff;
  --chat--input--container--border: 1px solid #acacac;
  --chat--input--container--border-radius: 24px;
  --chat--input--container--padding: 2px 4px 2px 8px;
  --chat--input--button--border-radius: 50%;

  --chat--button--padding: 8px 20px;
  --chat--button--border-radius: 20px;
  --chat--button--font-size: 14px;
  --chat--button--line-height: 1.4;
  --chat--button--color--primary: #fff;
  --chat--button--background--primary: #253544;
  --chat--button--color--primary--hover: #fff;
  --chat--button--background--primary--hover: #004070;
  --chat--button--color--primary--disabled: #fff;
  --chat--button--background--primary--disabled: #9aa6b2;
  --chat--button--color--secondary: #253544;
  --chat--button--background--secondary: transparent;
  --chat--button--border--secondary: 1px solid #253544;
  --chat--button--color--secondary--hover: #fff;
  --chat--button--background--secondary--hover: #004070;
  --chat--button--border--secondary--hover: 1px solid #004070;
  --chat--button--color--secondary--disabled: #9aa6b2;
  --chat--button--background--secondary--disabled: transparent;
  --chat--button--border--secondary--disabled: 1px solid #c9d0d8;
  --chat--close--button--color-hover: #c9dfef;

  --chat--input--send--button--background: #004070;
  --chat--input--send--button--color: #fff;
  --chat--input--send--button--background-hover: #253544;
  --chat--input--send--button--color-hover: #fff;

  --chat--body--background: #f4f6f9;
  --chat--footer--background: #fff;
  --chat--footer--color: #253544;
  --chat--footer--border-top: 1px solid #e3e8ee;
  --chat--footer--padding: 12px 16px;
}

/* :root adelante para ganarle a los estilos con scope del widget, que cargan después. */
:root .chat-layout .chat-header {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  row-gap: 4px;
  align-items: center;
}
:root .chat-layout .chat-header::before {
  content: '';
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='20' fill='%23fff'/%3E%3Cline x1='22' y1='9.5' x2='22' y2='13' stroke='%23004070' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='22' cy='8.3' r='2' fill='%23004070'/%3E%3Crect x='9.5' y='18' width='3' height='7' rx='1.5' fill='%23004070'/%3E%3Crect x='31.5' y='18' width='3' height='7' rx='1.5' fill='%23004070'/%3E%3Crect x='12' y='13' width='20' height='17' rx='6' fill='%23004070'/%3E%3Ccircle cx='17.8' cy='20.5' r='2.2' fill='%23fff'/%3E%3Ccircle cx='26.2' cy='20.5' r='2.2' fill='%23fff'/%3E%3Cpath d='M18.5 25.2q3.5 2.6 7 0' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='36' cy='35' r='5.5' fill='%233ccf6e' stroke='%23004070' stroke-width='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root .chat-layout .chat-header > * {
  grid-column: 2;
}
:root .chat-layout .chat-header h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
:root .chat-layout .chat-header h1::after {
  content: 'En línea';
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  padding: 3px 10px 3px 21px;
  border-radius: 20px;
  background: radial-gradient(circle at 11px 50%, #3ccf6e 3.5px, transparent 4px), rgba(255, 255, 255, 0.14);
}
:root .chat-layout .chat-header p {
  font-weight: 300;
  opacity: 0.9;
  margin: 0;
}

:root .chat-message {
  width: fit-content;
  max-width: min(80%, 640px);
  font-weight: 400;
}
:root .chat-message.chat-message-from-bot {
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(37, 53, 68, 0.06);
}
:root .chat-message.chat-message-from-user {
  border-bottom-right-radius: 4px;
}
:root .chat-message p {
  margin: 0;
}
:root .chat-message p + p {
  margin-top: 0.5em;
}
:root .chat-message a {
  color: #004070;
  font-weight: 600;
}
:root .chat-message.chat-message-from-user a {
  color: #fff;
}
:root .chat-message strong {
  font-weight: 600;
}

:root .chat-input .chat-inputs {
  align-items: center;
  transition: border-color var(--chat--transition-duration) ease, box-shadow var(--chat--transition-duration) ease;
}
:root .chat-input .chat-inputs:focus-within {
  border-color: #004070;
  box-shadow: 0 0 0 3px rgba(0, 64, 112, 0.1);
}
:root .chat-input .chat-inputs textarea {
  font-weight: 400;
}
:root .chat-input .chat-inputs textarea::placeholder {
  color: #8d8d8d;
  font-weight: 300;
}
:root .chat-input .chat-inputs .chat-input-send-button {
  width: 38px;
  height: 38px;
  margin: 4px;
  font-size: 17px;
}
:root .chat-input .chat-inputs .chat-input-send-button[disabled] {
  background: #e3e8ee;
  color: #9aa6b2;
}

:root .chat-window-wrapper .chat-window-toggle {
  box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.3);
  margin-right: -10px; /* centrado sobre a.page-scroll */
}
/* Ícono propio con el chat cerrado */
:root .chat-window-wrapper .chat-window[style*="display: none"] ~ .chat-window-toggle svg {
  display: none;
}
:root .chat-layout .chat-header .chat-close-button {
  color: #fff;
  width: 44px;
  height: 44px;
  margin: -10px -12px -10px 8px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
:root .chat-layout .chat-header .chat-close-button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}
:root .chat-layout .chat-body {
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #c9d0d8 transparent;
}

.gromanti-sugerencias {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.gromanti-sugerencias[hidden] {
  display: none;
}
.gromanti-sugerencias button {
  font-family: var(--chat--font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: #004070;
  background: #fff;
  border: 1px solid #004070;
  border-radius: 20px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.gromanti-sugerencias button:hover,
.gromanti-sugerencias button:focus-visible {
  background: #004070;
  color: #fff;
}

html:not(.gromanti-chat-movil) {
  --chat--window--width: 460px;
  --chat--window--height: 720px; /* el widget la achica si no entra */
}
html:not(.gromanti-chat-movil) .chat-message {
  max-width: 88%;
}

.gromanti-aviso {
  position: fixed;
  right: 92px;
  bottom: 84px;
  z-index: 1000;
  max-width: 260px;
  padding: 14px 36px 14px 16px;
  font-family: var(--chat--font-family);
  font-size: 15px;
  line-height: 1.45;
  color: #4e4e4e;
  background: #fff;
  border-radius: 16px 16px 4px 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  animation: gromanti-aparecer 0.35s ease-out;
}
.gromanti-aviso p {
  margin: 0;
}
.gromanti-aviso strong {
  color: #004070;
  font-weight: 600;
}
.gromanti-aviso-cerrar {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  color: #8d8d8d;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.gromanti-aviso-cerrar:hover {
  color: #004070;
  background: #f2f2f2;
}
@keyframes gromanti-aparecer {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Celular, también acostado (la clase la pone el script) */
html.gromanti-chat-movil .chat-window-wrapper .chat-window {
  position: fixed;
  top: var(--gromanti-chat-arriba, 0px); /* las setea el script según visualViewport (teclado) */
  left: 0;
  width: 100vw;
  height: var(--gromanti-chat-alto, 100dvh);
  max-width: none;
  max-height: none;
  margin: 0;
  border: none;
  border-radius: 0;
}
html.gromanti-chat-movil .chat-window-wrapper .chat-window:not([style*="display: none"]) ~ .chat-window-toggle {
  display: none;
}
html.gromanti-chat-movil .chat-message {
  max-width: 90%;
}
html.gromanti-chat-movil .chat-layout .chat-header h1::after {
  display: none;
}
html.gromanti-chat-movil .gromanti-aviso {
  right: 84px;
  bottom: 80px;
  max-width: min(240px, calc(100vw - 100px));
}
html.gromanti-chat-movil .gromanti-aviso-cerrar {
  width: 32px;
  height: 32px;
  top: 3px;
  right: 3px;
}
html.gromanti-chat-movil .chat-layout .chat-footer {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
@media (max-height: 500px) {
  :root .chat-layout .chat-header p {
    display: none;
  }
}
html.gromanti-chat-pantalla-completa,
html.gromanti-chat-pantalla-completa body {
  overflow: hidden;
}

/* Para reabrir sin animación al cambiar de página */
:root .chat-window-wrapper.gromanti-sin-animacion,
:root .chat-window-wrapper.gromanti-sin-animacion * {
  transition: none !important;
  animation: none !important;
}
:root .chat-window-wrapper .chat-window[style*="display: none"] ~ .chat-window-toggle::before {
  content: '';
  width: 30px;
  height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M6 3.5h12A3 3 0 0 1 21 6.5v7a3 3 0 0 1-3 3h-6.2l-4.3 3.6c-.5.4-1.2.05-1.2-.6v-3H6a3 3 0 0 1-3-3v-7a3 3 0 0 1 3-3z'/%3E%3Ccircle cx='8.2' cy='10' r='1.3' fill='%23004070'/%3E%3Ccircle cx='12' cy='10' r='1.3' fill='%23004070'/%3E%3Ccircle cx='15.8' cy='10' r='1.3' fill='%23004070'/%3E%3C/svg%3E") center / contain no-repeat;
}

html:not(.gromanti-chat-movil) {
  --chat--toggle--size: 66px;
}
html:not(.gromanti-chat-movil) .chat-window-wrapper .chat-window-toggle {
  margin-right: -8px;
}
html:not(.gromanti-chat-movil) .chat-window-wrapper .chat-window[style*="display: none"] ~ .chat-window-toggle::before {
  width: 34px;
  height: 34px;
}