/*
  Widget del asesor virtual. Usa SOLO los tokens de tokens.css (con valores de respaldo por si
  este archivo se carga antes o sin ellos), así combina con el diseño final del sitio.
  Prefijo .sys-asesor para no chocar con nada.
*/

.sys-asesor {
  --asesor-azul: var(--sys-azul, #0B3954);
  --asesor-azul-hondo: var(--sys-azul-hondo, #072638);
  --asesor-ambar: var(--sys-ambar, #FFB128);
  --asesor-ambar-hondo: var(--sys-ambar-hondo, #E09400);
  --asesor-fondo: var(--sys-fondo-suave, #F5F7FA);
  --asesor-superficie: var(--sys-superficie, #FFFFFF);
  --asesor-borde: var(--sys-borde, #E0E4EF);
  --asesor-texto: var(--sys-texto, #1B2A35);
  --asesor-suave: var(--sys-texto-suave, #5C676D);
  --asesor-ok: var(--sys-ok, #1E8E3E);
  --asesor-aviso: var(--sys-aviso, #B26A00);
  --asesor-error: var(--sys-error, #C62828);
  --asesor-whatsapp: var(--sys-whatsapp, #1FA855);
  --asesor-radio: var(--sys-radio, 12px);
  --asesor-radio-grande: var(--sys-radio-grande, 24px);
  --asesor-pildora: var(--sys-radio-pildora, 999px);
  --asesor-sombra: var(--sys-sombra, 0 1px 2px rgba(11, 57, 84, .06), 0 4px 16px rgba(11, 57, 84, .08));
  --asesor-sombra-alta: var(--sys-sombra-alta, 0 8px 32px rgba(11, 57, 84, .16));
  --asesor-margen: 16px;
  font-family: var(--sys-fuente-texto, "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif);
  color: var(--asesor-texto);
  font-size: 15px;
  line-height: 1.5;
}

.sys-asesor *,
.sys-asesor *::before,
.sys-asesor *::after {
  box-sizing: border-box;
}

.sys-asesor [hidden] {
  display: none !important;
}

.sys-asesor__solo-lector {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Botón flotante ─────────────────────────────────────────────────────── */

.sys-asesor__lanzador {
  position: fixed;
  right: max(var(--asesor-margen), env(safe-area-inset-right));
  bottom: max(var(--asesor-margen), env(safe-area-inset-bottom));
  z-index: 9000;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 22px 0 16px;
  border: 0;
  border-radius: var(--asesor-pildora);
  background: var(--asesor-azul);
  color: #fff;
  font: inherit;
  font-weight: 600;
  box-shadow: var(--asesor-sombra-alta);
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}

.sys-asesor__lanzador:hover {
  background: var(--asesor-azul-hondo);
  transform: translateY(-1px);
}

.sys-asesor__lanzador:focus-visible,
.sys-asesor button:focus-visible,
.sys-asesor a:focus-visible,
.sys-asesor textarea:focus-visible,
.sys-asesor__mensajes:focus-visible {
  outline: 3px solid var(--asesor-ambar);
  outline-offset: 2px;
}

.sys-asesor__icono {
  flex: none;
}

/* Hay una conversación guardada: un punto ámbar lo recuerda. */
.sys-asesor--con-conversacion .sys-asesor__lanzador::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--asesor-ambar);
  border: 2px solid var(--asesor-azul);
}

.sys-asesor--abierto .sys-asesor__lanzador {
  display: none;
}

/* ── Panel ──────────────────────────────────────────────────────────────── */

.sys-asesor__panel {
  position: fixed;
  right: max(var(--asesor-margen), env(safe-area-inset-right));
  bottom: max(var(--asesor-margen), env(safe-area-inset-bottom));
  z-index: 9001;
  display: flex;
  flex-direction: column;
  width: min(420px, calc(100vw - 2 * var(--asesor-margen)));
  height: min(680px, calc(100vh - 2 * var(--asesor-margen)));
  height: min(680px, calc(100dvh - 2 * var(--asesor-margen)));
  overflow: hidden;
  background: var(--asesor-superficie);
  border: 1px solid var(--asesor-borde);
  border-radius: var(--asesor-radio-grande);
  box-shadow: var(--asesor-sombra-alta);
  animation: sys-asesor-entrar .18s ease-out;
}

@keyframes sys-asesor-entrar {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.sys-asesor__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  background: var(--asesor-azul);
  color: #fff;
}

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

.sys-asesor__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--asesor-ambar);
  color: var(--asesor-azul);
}

.sys-asesor__titulo {
  margin: 0;
  font-family: var(--sys-fuente-titulos, "Sora", "Segoe UI", system-ui, sans-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

.sys-asesor__subtitulo {
  margin: 2px 0 0;
  font-size: 12px;
  opacity: .85;
}

.sys-asesor__herramientas {
  display: flex;
  gap: 4px;
  flex: none;
}

.sys-asesor__boton-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.sys-asesor__boton-icono:hover {
  background: rgba(255, 255, 255, .14);
}

/* ── Mensajes ───────────────────────────────────────────────────────────── */

.sys-asesor__mensajes {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--asesor-fondo);
}

.sys-asesor__msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 18px;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.sys-asesor__msg--usuario {
  align-self: flex-end;
  background: var(--asesor-azul);
  color: #fff;
  border-bottom-right-radius: 6px;
}

.sys-asesor__msg--asistente {
  align-self: flex-start;
  background: var(--asesor-superficie);
  border: 1px solid var(--asesor-borde);
  border-bottom-left-radius: 6px;
  box-shadow: var(--asesor-sombra);
}

.sys-asesor__msg--error {
  border-color: rgba(198, 40, 40, .35);
}

.sys-asesor__texto {
  margin: 0;
  white-space: normal;
}

.sys-asesor__msg--usuario .sys-asesor__texto {
  white-space: pre-wrap;
}

.sys-asesor__texto p {
  margin: 0 0 8px;
}

.sys-asesor__texto p:last-child,
.sys-asesor__texto ul:last-child,
.sys-asesor__texto ol:last-child {
  margin-bottom: 0;
}

.sys-asesor__texto ul,
.sys-asesor__texto ol {
  margin: 0 0 8px;
  padding-left: 20px;
}

.sys-asesor__texto li + li {
  margin-top: 2px;
}

.sys-asesor__texto a {
  color: var(--asesor-azul);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Tarjetas de producto ───────────────────────────────────────────────── */

.sys-asesor__productos {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.sys-asesor__producto {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 1px solid var(--asesor-borde);
  border-radius: var(--asesor-radio);
  background: var(--asesor-superficie);
  color: var(--asesor-texto);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.sys-asesor__producto:hover {
  border-color: var(--asesor-azul);
  box-shadow: var(--asesor-sombra);
}

.sys-asesor__producto-foto {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--asesor-fondo);
}

.sys-asesor__producto-foto--vacia {
  display: block;
  background:
    linear-gradient(135deg, transparent 45%, var(--asesor-borde) 45%, var(--asesor-borde) 55%, transparent 55%),
    var(--asesor-fondo);
}

.sys-asesor__producto-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.sys-asesor__producto-nombre {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
}

.sys-asesor__producto-presentacion {
  font-size: 12px;
  color: var(--asesor-suave);
}

.sys-asesor__insignia {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 8px;
  border-radius: var(--asesor-pildora);
  font-size: 11px;
  font-weight: 600;
}

.sys-asesor__insignia--disponible {
  background: rgba(30, 142, 62, .12);
  color: var(--asesor-ok);
}

.sys-asesor__insignia--consultar {
  background: rgba(178, 106, 0, .12);
  color: var(--asesor-aviso);
}

/* ── Botones de contacto ────────────────────────────────────────────────── */

.sys-asesor__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.sys-asesor__accion {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--asesor-azul);
  border-radius: var(--asesor-pildora);
  background: var(--asesor-superficie);
  color: var(--asesor-azul);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.sys-asesor__accion:hover {
  background: var(--asesor-fondo);
}

.sys-asesor__accion--whatsapp {
  border-color: var(--asesor-whatsapp);
  background: var(--asesor-whatsapp);
  color: #fff;
}

.sys-asesor__accion--whatsapp:hover {
  background: var(--asesor-whatsapp);
  filter: brightness(.94);
}

/* ── Calificación ───────────────────────────────────────────────────────── */

.sys-asesor__calificar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--asesor-suave);
}

.sys-asesor__pulgar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--asesor-borde);
  border-radius: 50%;
  background: var(--asesor-superficie);
  color: var(--asesor-suave);
  cursor: pointer;
}

.sys-asesor__pulgar:hover:not(:disabled) {
  border-color: var(--asesor-azul);
  color: var(--asesor-azul);
}

/* ── Indicador de escritura ─────────────────────────────────────────────── */

.sys-asesor__escribiendo {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--asesor-pildora);
  background: var(--asesor-superficie);
  border: 1px solid var(--asesor-borde);
  font-size: 13px;
  color: var(--asesor-suave);
}

.sys-asesor__puntos {
  display: inline-flex;
  gap: 3px;
}

.sys-asesor__puntos span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--asesor-azul);
  opacity: .35;
  animation: sys-asesor-punto 1s infinite ease-in-out;
}

.sys-asesor__puntos span:nth-child(2) { animation-delay: .15s; }
.sys-asesor__puntos span:nth-child(3) { animation-delay: .3s; }

@keyframes sys-asesor-punto {
  0%, 80%, 100% { opacity: .35; transform: none; }
  40% { opacity: 1; transform: translateY(-3px); }
}

/* ── Sugerencias ────────────────────────────────────────────────────────── */

.sys-asesor__sugerencias {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px 0;
  background: var(--asesor-superficie);
  border-top: 1px solid var(--asesor-borde);
}

.sys-asesor__chip {
  padding: 7px 12px;
  border: 1px solid var(--asesor-borde);
  border-radius: var(--asesor-pildora);
  background: var(--asesor-fondo);
  color: var(--asesor-azul);
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.sys-asesor__chip:hover {
  border-color: var(--asesor-azul);
}

/* ── Formulario ─────────────────────────────────────────────────────────── */

.sys-asesor__formulario {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px 6px;
  background: var(--asesor-superficie);
}

.sys-asesor__sugerencias[hidden] + .sys-asesor__formulario {
  border-top: 1px solid var(--asesor-borde);
}

.sys-asesor__entrada {
  flex: 1 1 auto;
  min-height: 44px;
  max-height: 140px;
  padding: 10px 14px;
  border: 1px solid var(--asesor-borde);
  border-radius: 22px;
  background: var(--asesor-fondo);
  color: var(--asesor-texto);
  font: inherit;
  /* 16px evita que iOS haga zoom al enfocar. */
  font-size: 16px;
  line-height: 1.4;
  resize: none;
}

.sys-asesor__entrada:focus {
  border-color: var(--asesor-azul);
  background: var(--asesor-superficie);
}

.sys-asesor__enviar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--asesor-ambar);
  color: var(--asesor-azul);
  cursor: pointer;
}

.sys-asesor__enviar:hover:not(:disabled) {
  background: var(--asesor-ambar-hondo);
}

.sys-asesor__enviar:disabled {
  opacity: .5;
  cursor: progress;
}

.sys-asesor__aviso {
  margin: 0;
  padding: 0 16px 10px;
  background: var(--asesor-superficie);
  font-size: 11px;
  line-height: 1.4;
  color: var(--asesor-suave);
}

.sys-asesor__aviso a {
  color: inherit;
}

/* ── Página /asesor (pantalla completa dentro de la página) ─────────────── */

.sys-asesor__panel--completo {
  position: relative;
  right: auto;
  bottom: auto;
  z-index: auto;
  width: 100%;
  max-width: var(--sys-ancho-max, 1240px);
  height: min(760px, calc(100vh - 160px));
  height: min(760px, calc(100dvh - 160px));
  min-height: 480px;
  margin: 0 auto;
  box-shadow: var(--asesor-sombra);
  animation: none;
}

/* ── Móvil: el diálogo ocupa toda la pantalla ───────────────────────────── */

@media (max-width: 640px) {
  .sys-asesor__lanzador {
    width: 56px;
    height: 56px;
    padding: 0;
    justify-content: center;
  }

  .sys-asesor__lanzador-texto {
    display: none;
  }

  .sys-asesor__panel:not(.sys-asesor__panel--completo) {
    inset: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    border: 0;
    border-radius: 0;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .sys-asesor__panel--completo {
    height: calc(100dvh - 120px);
    min-height: 420px;
    border-radius: var(--asesor-radio);
  }

  /* Sin scroll de la página detrás del diálogo. */
  html.sys-asesor-abierto,
  html.sys-asesor-abierto body {
    overflow: hidden;
  }

  .sys-asesor__msg {
    max-width: 92%;
  }

  .sys-asesor__sugerencias {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .sys-asesor__chip {
    flex: none;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sys-asesor__panel,
  .sys-asesor__lanzador,
  .sys-asesor__producto,
  .sys-asesor__puntos span {
    animation: none !important;
    transition: none !important;
  }
}