/* ==========================================================================
   NUEVO NENELANDIA — ASISTENTE CONVERSACIONAL v2.1.3
   Mobile-first · compatible con panel Panda y modo flotante
   ========================================================================== */
:root {
  --nn-chat-blue: #8BC5ED;
  --nn-chat-orange: #EC7440;
  --nn-chat-white: #FFFFFF;
  --nn-chat-black: #000000;
  --nn-chat-text-soft: rgba(0, 0, 0, 0.70);
  --nn-chat-text-secondary: rgba(0, 0, 0, 0.60);
  --nn-chat-border: rgba(0, 0, 0, 0.10);
  --nn-chat-soft: rgba(0, 0, 0, 0.05);
  --nn-chat-radius: 18px;
  --nn-chat-shadow: 0 18px 55px rgba(0, 0, 0, 0.20);
}

.nn-assistant,
.nn-assistant * { box-sizing: border-box; }

.nn-assistant {
  position: fixed;
  z-index: 2147483000;
  right: 14px;
  bottom: calc(76px + env(safe-area-inset-bottom));
  color: var(--nn-chat-black);
  font-family: Poppins, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  text-align: left;
}


/* En integración Panda, nunca mostrar la instancia original del footer.
   Solo se hace visible cuando JavaScript la mueve al contenedor lateral. */
.nn-assistant--external-trigger:not(.nn-assistant--embedded),
.nn-assistant--awaiting-embed {
  display: none !important;
}

.nn-assistant--embedded[hidden] {
  display: none !important;
}

.nn-assistant--bottom-left { right: auto; left: 14px; }
.nn-assistant--top-right { top: 14px; bottom: auto; }
.nn-assistant--top-left { top: 14px; right: auto; bottom: auto; left: 14px; }

.nn-assistant button,
.nn-assistant input,
.nn-assistant a { font: inherit; }

.nn-assistant button:focus-visible,
.nn-assistant input:focus-visible,
.nn-assistant a:focus-visible {
  outline: 3px solid rgba(236, 116, 64, 0.40);
  outline-offset: 2px;
}

.nn-assistant__launcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 10px 16px;
  gap: 9px;
  border: 0;
  border-radius: 999px;
  background: var(--nn-chat-orange);
  box-shadow: 0 10px 28px rgba(236, 116, 64, 0.34);
  color: var(--nn-chat-white);
  cursor: pointer;
  font-weight: 600;
}

.nn-assistant__launcher-icon { font-size: 20px; }

.nn-assistant__panel {
  position: fixed;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: min(92dvh, 760px);
  max-height: calc(100dvh - env(safe-area-inset-top));
  overflow: hidden;
  border: 1px solid var(--nn-chat-border);
  border-radius: 24px 24px 0 0;
  background: var(--nn-chat-white);
  box-shadow: var(--nn-chat-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.nn-assistant.is-open .nn-assistant__panel,
.nn-assistant--embedded .nn-assistant__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nn-assistant.is-open .nn-assistant__launcher { opacity: 0; pointer-events: none; }

.nn-assistant__header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--nn-chat-border);
  background: linear-gradient(135deg, rgba(139, 197, 237, .42), rgba(255,255,255,.98));
}

.nn-assistant__brand { display: flex; align-items: center; min-width: 0; gap: 10px; }

.nn-assistant__avatar,
.nn-assistant__mini-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--nn-chat-blue);
  color: var(--nn-chat-white);
  font-family: Nunito, Arial, sans-serif;
  font-weight: 800;
}

.nn-assistant__avatar {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 2px solid rgba(255,255,255,.9);
  font-size: 21px;
}

.nn-assistant__brand-copy { min-width: 0; }
.nn-assistant__eyebrow,
.nn-assistant__header-title,
.nn-assistant__status { margin: 0; }

.nn-assistant__eyebrow {
  color: var(--nn-chat-text-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.nn-assistant__header-title {
  overflow: hidden;
  font-family: Nunito, Arial, sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nn-assistant__status { color: var(--nn-chat-text-secondary); font-size: 11px; line-height: 1.35; }
.nn-assistant__status span { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #3da85b; }

.nn-assistant__header-actions { display: flex; gap: 2px; }
.nn-assistant__icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--nn-chat-black);
  cursor: pointer;
  font-family: Nunito, Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
}
.nn-assistant__icon-button:hover { background: rgba(0,0,0,.06); }

.nn-assistant__conversation {
  flex: 1 1 auto;
  min-height: 0;
  padding: 18px 12px 10px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, rgba(139,197,237,.08), rgba(255,255,255,0) 150px), var(--nn-chat-white);
  -webkit-overflow-scrolling: touch;
}

.nn-assistant__message-row { display: flex; align-items: flex-end; width: 100%; margin: 0 0 12px; gap: 7px; }
.nn-assistant__message-row--user { justify-content: flex-end; }
.nn-assistant__message-row--assistant { justify-content: flex-start; }

.nn-assistant__mini-avatar { flex: 0 0 28px; width: 28px; height: 28px; font-size: 13px; }

.nn-assistant__bubble {
  max-width: min(84%, 330px);
  padding: 11px 13px;
  border-radius: 17px;
  box-shadow: 0 3px 12px rgba(0,0,0,.06);
  overflow-wrap: anywhere;
}

.nn-assistant__bubble p { margin: 0; font-size: 14px; line-height: 1.55; }
.nn-assistant__bubble p + p { margin-top: 8px; }

.nn-assistant__bubble--assistant {
  border: 1px solid var(--nn-chat-border);
  border-bottom-left-radius: 5px;
  background: var(--nn-chat-white);
  color: var(--nn-chat-black);
}

.nn-assistant__bubble--user {
  border-bottom-right-radius: 5px;
  background: var(--nn-chat-orange);
  color: var(--nn-chat-white);
}

.nn-assistant__answer-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: 10px;
  padding: 9px 13px;
  border: 1px solid var(--nn-chat-orange);
  border-radius: 12px;
  color: var(--nn-chat-orange);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.nn-assistant__typing { display: flex; align-items: center; min-height: 42px; gap: 5px; }
.nn-assistant__typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0,0,0,.42);
  animation: nn-chat-dot 1.15s infinite ease-in-out;
}
.nn-assistant__typing span:nth-child(2) { animation-delay: .14s; }
.nn-assistant__typing span:nth-child(3) { animation-delay: .28s; }
@keyframes nn-chat-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }

.nn-assistant__suggestions {
  display: flex;
  flex: 0 0 auto;
  max-height: 142px;
  padding: 8px 12px 9px;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  border-top: 1px solid var(--nn-chat-border);
  background: var(--nn-chat-white);
  scrollbar-width: thin;
}

.nn-assistant__suggestion {
  flex: 0 0 auto;
  min-height: 42px;
  max-width: 230px;
  padding: 9px 13px;
  border: 1px solid rgba(236,116,64,.42);
  border-radius: 999px;
  background: rgba(236,116,64,.06);
  color: var(--nn-chat-black);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
}
.nn-assistant__suggestion:hover { border-color: var(--nn-chat-orange); background: rgba(236,116,64,.12); }
.nn-assistant__suggestion:disabled { cursor: wait; opacity: .55; }
.nn-assistant__suggestion--secondary,
.nn-assistant__suggestion--back { border-color: rgba(139,197,237,.8); background: rgba(139,197,237,.12); }

.nn-assistant__composer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 62px;
  padding: 8px 10px;
  gap: 7px;
  border-top: 1px solid var(--nn-chat-border);
  background: var(--nn-chat-white);
}

.nn-assistant__composer-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 999px;
  outline: 0;
  background: rgba(0,0,0,.035);
  color: var(--nn-chat-black);
  font-size: 14px;
}
.nn-assistant__composer-input:focus { border-color: var(--nn-chat-blue); box-shadow: 0 0 0 3px rgba(139,197,237,.22); }
.nn-assistant__composer-input::placeholder { color: var(--nn-chat-text-secondary); opacity: 1; }

.nn-assistant__send {
  display: inline-flex;
  flex: 0 0 46px;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--nn-chat-orange);
  color: var(--nn-chat-white);
  cursor: pointer;
  font-size: 20px;
}

.nn-assistant__human {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--nn-chat-border);
  background: var(--nn-chat-white);
  color: var(--nn-chat-orange);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

/* Integración dentro del panel lateral de Panda
   Conserva las dimensiones del módulo anterior: el contenedor de Panda no
   siempre declara una altura explícita, por lo que height:100% colapsaba. */
.nn-assistant--embedded {
  position: static !important;
  inset: auto !important;
  right: auto !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-width: 0;
  padding: 0 10px 12px;
  box-sizing: border-box;
}

.nn-assistant--embedded .nn-assistant__panel {
  position: relative !important;
  inset: auto !important;
  right: auto !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0;
  max-width: none !important;
  height: calc(100vh - 150px) !important;
  max-height: calc(100vh - 150px) !important;
  min-height: 430px;
  border: 1px solid rgba(139, 197, 237, .42);
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .08);
  box-sizing: border-box;
}

/* En un sidebar estrecho las opciones deben ocupar líneas completas,
   no un carrusel horizontal que deja botones cortados. */
.nn-assistant--embedded .nn-assistant__suggestions {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  max-height: 168px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px 10px 10px;
  box-sizing: border-box;
}

.nn-assistant--embedded .nn-assistant__suggestion {
  width: 100%;
  max-width: none;
  min-width: 0;
  white-space: normal;
  text-align: left;
  box-sizing: border-box;
}

.nn-assistant--embedded .nn-assistant__header { min-height: 70px; padding-inline: 10px; }
.nn-assistant--embedded .nn-assistant__avatar { flex-basis: 38px; width: 38px; height: 38px; font-size: 18px; }
.nn-assistant--embedded .nn-assistant__icon-button { width: 40px; height: 40px; }
.nn-assistant--embedded .nn-assistant__bubble { max-width: calc(100% - 35px); }
.nn-assistant--embedded .nn-assistant__suggestions { max-height: 128px; }

html.nn-assistant-open { overflow: hidden; }

@media (min-width: 480px) {
  .nn-assistant__panel {
    right: 18px;
    bottom: 18px;
    width: min(390px, calc(100vw - 36px));
    height: min(720px, calc(100dvh - 36px));
    border-radius: 24px;
  }
  
/* En integración Panda, nunca mostrar la instancia original del footer.
   Solo se hace visible cuando JavaScript la mueve al contenedor lateral. */
.nn-assistant--external-trigger:not(.nn-assistant--embedded),
.nn-assistant--awaiting-embed {
  display: none !important;
}

.nn-assistant--embedded[hidden] {
  display: none !important;
}

.nn-assistant--bottom-left .nn-assistant__panel,
  .nn-assistant--top-left .nn-assistant__panel { right: auto; left: 18px; }
  .nn-assistant--top-right .nn-assistant__panel,
  .nn-assistant--top-left .nn-assistant__panel { top: 18px; bottom: auto; }
  .nn-assistant--embedded .nn-assistant__panel { width: 100% !important; height: calc(100vh - 150px) !important; border-radius: 18px; }
}

@media (max-width: 359px) {
  .nn-assistant__header { padding-inline: 10px; }
  .nn-assistant__eyebrow { display: none; }
  .nn-assistant__bubble { max-width: calc(100% - 34px); }
  .nn-assistant__suggestion { max-width: 205px; }
}

@media (prefers-reduced-motion: reduce) {
  .nn-assistant__panel,
  .nn-assistant__typing span { animation: none; transition: none; }
}

@media (max-width: 767px) {
  .nn-assistant--embedded {
    padding: 0 8px 10px;
  }

  .nn-assistant--embedded .nn-assistant__panel {
    height: calc(100dvh - 190px) !important;
    max-height: calc(100dvh - 190px) !important;
    min-height: 360px;
    border-radius: 14px;
  }
}


/* ==========================================================================\n   AJUSTES v2.1.3 — identidad Nenelandia y opciones rápidas\n   ========================================================================== */

.nn-assistant__header {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.72) 0 10%, transparent 11%),
    linear-gradient(135deg, rgba(139,197,237,.72), rgba(255,255,255,.98) 58%, rgba(236,116,64,.13));
}

.nn-assistant__header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--nn-chat-blue), var(--nn-chat-orange));
}

.nn-assistant__header { position: relative; }

.nn-assistant__avatar,
.nn-assistant__mini-avatar {
  overflow: hidden;
  padding: 0;
  background: var(--nn-chat-white);
  box-shadow: 0 3px 12px rgba(0,0,0,.10);
}

.nn-assistant__avatar img,
.nn-assistant__mini-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.nn-assistant__avatar {
  border: 2px solid var(--nn-chat-white);
  box-shadow:
    0 0 0 2px rgba(139,197,237,.78),
    0 5px 14px rgba(0,0,0,.12);
}

.nn-assistant__mini-avatar {
  border: 1px solid rgba(139,197,237,.62);
}

.nn-assistant--embedded .nn-assistant__suggestions {
  display: flex;
  flex-direction: column;
  gap: 9px !important;
  row-gap: 9px !important;
  max-height: 188px;
  padding: 10px 10px 12px;
  scroll-padding: 10px;
  background:
    linear-gradient(180deg, rgba(139,197,237,.08), rgba(255,255,255,1) 46%);
}

.nn-assistant--embedded .nn-assistant__suggestion {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  width: 100%;
  min-height: 46px;
  margin: 0 !important;
  padding: 10px 13px;
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(0,0,0,.035);
}

.nn-assistant--embedded .nn-assistant__suggestion:nth-child(odd) {
  border-color: rgba(236,116,64,.42);
  background: rgba(236,116,64,.075);
}

.nn-assistant--embedded .nn-assistant__suggestion:nth-child(even) {
  border-color: rgba(139,197,237,.72);
  background: rgba(139,197,237,.14);
}

.nn-assistant--embedded .nn-assistant__suggestion:hover,
.nn-assistant--embedded .nn-assistant__suggestion:focus-visible {
  border-color: var(--nn-chat-orange);
  background: rgba(236,116,64,.14);
  transform: translateY(-1px);
}

.nn-assistant--embedded .nn-assistant__composer {
  position: relative;
  z-index: 2;
  margin-top: 0;
  box-shadow: 0 -6px 16px rgba(0,0,0,.035);
}

.nn-assistant--embedded .nn-assistant__conversation {
  padding-bottom: 14px;
}

@media (max-width: 767px) {
  .nn-assistant--embedded .nn-assistant__suggestions {
    max-height: 176px;
  }
}

/* ==========================================================================
   AJUSTES v2.1.6 — Panda móvil
   ========================================================================== */

/* Dentro del panel Panda solo tiene sentido reiniciar; Panda ya proporciona
   su propio cierre para la columna lateral. */
.nn-assistant--embedded .nn-assistant__icon-button--close {
  display: none !important;
}

.nn-assistant--embedded .nn-assistant__header-actions {
  margin-left: auto;
}

@media (max-width: 767px) {
  .nn-assistant--embedded {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 10px 12px !important;
    overflow: hidden;
  }

  .nn-assistant--embedded .nn-assistant__panel {
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100dvh - 150px) !important;
    max-height: calc(100dvh - 150px) !important;
    min-height: 460px;
    border-radius: 18px;
  }

  .nn-assistant--embedded .nn-assistant__header {
    min-height: 82px;
    padding: 12px;
  }

  .nn-assistant--embedded .nn-assistant__conversation {
    padding: 16px 12px 12px;
  }

  .nn-assistant--embedded .nn-assistant__suggestions {
    max-height: 230px;
    gap: 10px !important;
    padding: 10px 12px 12px;
  }

  .nn-assistant--embedded .nn-assistant__suggestion {
    min-height: 52px;
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.35;
  }

  .nn-assistant--embedded .nn-assistant__composer {
    padding: 10px 12px;
    gap: 9px;
  }

  .nn-assistant--embedded .nn-assistant__composer-input {
    min-width: 0;
    height: 48px;
    font-size: 15px;
  }

  .nn-assistant--embedded .nn-assistant__send {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
  }

  .nn-assistant--embedded .nn-assistant__human {
    min-height: 50px;
    font-size: 14px;
  }
}

/* ==========================================================================
   AJUSTES v2.1.8 — móvil compacto sin alterar el ancho de Panda
   ========================================================================== */
@media (max-width: 767px) {
  /* Se conserva estrictamente el ancho que proporciona Panda. */
  .nn-assistant--embedded {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 8px 10px !important;
    box-sizing: border-box;
    overflow: hidden;
  }

  .nn-assistant--embedded .nn-assistant__panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* Cabecera más compacta. */
  .nn-assistant--embedded .nn-assistant__header {
    min-height: 68px;
    padding: 9px 10px;
    gap: 8px;
  }

  .nn-assistant--embedded .nn-assistant__brand {
    gap: 8px;
  }

  .nn-assistant--embedded .nn-assistant__avatar {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
  }

  .nn-assistant--embedded .nn-assistant__eyebrow {
    font-size: 9px;
    line-height: 1.25;
    letter-spacing: .09em;
  }

  .nn-assistant--embedded .nn-assistant__title {
    font-size: 14px;
    line-height: 1.2;
  }

  .nn-assistant--embedded .nn-assistant__status {
    font-size: 10px;
    line-height: 1.25;
  }

  .nn-assistant--embedded .nn-assistant__icon-button {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  /* Conversación: más contenido visible sin estrechar las burbujas. */
  .nn-assistant--embedded .nn-assistant__conversation {
    padding: 11px 9px 9px;
  }

  .nn-assistant--embedded .nn-assistant__message-row {
    gap: 5px;
    margin-bottom: 9px;
  }

  .nn-assistant--embedded .nn-assistant__mini-avatar {
    flex: 0 0 23px;
    width: 23px;
    height: 23px;
  }

  .nn-assistant--embedded .nn-assistant__bubble {
    max-width: calc(100% - 28px);
    padding: 9px 10px;
    border-radius: 13px;
  }

  .nn-assistant--embedded .nn-assistant__bubble p {
    font-size: 12px;
    line-height: 1.48;
  }

  .nn-assistant--embedded .nn-assistant__bubble a,
  .nn-assistant--embedded .nn-assistant__answer-action {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 12px;
  }

  /* Opciones compactas y separadas. */
  .nn-assistant--embedded .nn-assistant__suggestions {
    max-height: 190px;
    gap: 7px !important;
    row-gap: 7px !important;
    padding: 8px 9px 9px;
  }

  .nn-assistant--embedded .nn-assistant__suggestion {
    min-height: 43px;
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.3;
  }

  /* Buscador contenido dentro del ancho real de Panda. */
  .nn-assistant--embedded .nn-assistant__composer {
    width: 100%;
    min-width: 0;
    padding: 8px 9px;
    gap: 7px;
    box-sizing: border-box;
  }

  .nn-assistant--embedded .nn-assistant__composer-input {
    width: auto;
    min-width: 0;
    height: 42px;
    padding: 0 11px;
    font-size: 12px;
  }

  .nn-assistant--embedded .nn-assistant__send {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    font-size: 18px;
  }

  .nn-assistant--embedded .nn-assistant__human {
    min-height: 43px;
    padding: 8px 10px;
    font-size: 12px;
  }
}