/* =========================================================================
   WIDGET DE CHAT — estructura y estados.
   Los motivos del indicador están en motivos.css (se cargan aparte).

   ESTO ES ESTRUCTURA, NO IDENTIDAD VISUAL. Colores, radios y tipografía
   salen de custom properties que se pisan desde la página del cliente:

       .lw {
         --lw-acento: #2563eb;
         --lw-radio: 1rem;
         --lw-fuente: "Outfit", system-ui, sans-serif;   (opcional)
       }

   Sin `--lw-fuente`, el chat hereda la tipografía del sitio.

   No usa Tailwind a propósito: el widget tiene que poder embeberse en un
   sitio que no compila Tailwind (un WordPress, un Tiendanube) sin arrastrar
   nada. Es CSS plano con nombres propios y prefijo `lw-` para no chocar con
   los estilos del sitio anfitrión.
   ========================================================================= */

.lw {
  --lw-acento: #2563eb;
  --lw-radio: 1rem;
  /* --lw-fuente NO tiene valor por defecto a propósito (26/09/2026): sin
     definirla, el chat hereda la tipografía del sitio que lo aloja. Antes
     venía fijada en la del sistema operativo y se notaba: el sitio en Roboto
     y el chat en Segoe UI. */
  --lw-fondo: #ffffff;
  --lw-texto: #111827;
  --lw-borde: #e5e7eb;

  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 2147483000; /* alto, pero por debajo del techo entero, para que un
                          banner de cookies del cliente pueda ir arriba */
  font-family: var(--lw-fuente, inherit);
  color: var(--lw-texto);
}

/* Línea de crédito opcional (data-credito="si"). Chica y en gris: tiene que
   estar, no competir con la conversación. */
.lw-credito {
  margin: 0;
  padding: 0 0.75rem 0.5rem;
  text-align: center;
  font-size: 0.6875rem;
  line-height: 1.2;
}
.lw-credito a {
  color: #9ca3af;
  text-decoration: none;
}
.lw-credito a:hover {
  color: var(--lw-acento);
  text-decoration: underline;
}

.lw-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------ lanzador ------------------------------- */

.lw-lanzador {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-left: auto;
  border: 0;
  border-radius: 999px;
  background: var(--lw-acento);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.18);
  transition: transform 0.18s ease;
}
.lw-lanzador:hover {
  transform: scale(1.06);
}
.lw-lanzador:focus-visible {
  outline: 3px solid var(--lw-acento);
  outline-offset: 3px;
}

/* -------------------------------- panel -------------------------------- */

.lw-panel {
  display: flex;
  flex-direction: column;
  width: min(23rem, calc(100vw - 2rem));
  height: min(30rem, calc(100vh - 6rem));
  margin-bottom: 0.75rem;
  overflow: hidden;
  background: var(--lw-fondo);
  border: 1px solid var(--lw-borde);
  border-radius: var(--lw-radio);
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.18);
}
.lw-panel[hidden] {
  display: none;
}

.lw-panel__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--lw-acento);
  color: #fff;
}
.lw-panel__titulo {
  font-size: 0.9375rem;
  font-weight: 600;
}
.lw-cerrar {
  border: 0;
  background: none;
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
}
.lw-cerrar:hover {
  opacity: 1;
}

/* -------------------------------- hilo --------------------------------- */

.lw-hilo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain; /* que el scroll del chat no arrastre la página */
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* 🔴 NINGÚN HIJO DEL HILO SE ACHICA. El hilo es una columna flexible de alto
   fijo, y por defecto `flex-shrink: 1` hace que, cuando el contenido no entra,
   el navegador ACHIQUE las burbujas en vez de dejar scrollear: el texto queda
   cortado debajo de la burbuja siguiente. Pasaba en cualquier conversación
   larga y nadie lo vio; con las tarjetas de producto se hizo evidente, porque
   la fila de tarjetas —que tiene overflow propio— se aplastaba hasta mostrar
   sólo la foto. Encontrado mirando la captura, con todas las pruebas en verde
   (26/09/2026). */
.lw-hilo > * {
  flex-shrink: 0;
}

.lw-burbuja {
  max-width: 85%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.875rem;
  white-space: pre-wrap;
  word-break: break-word;
  /*
    Una línea de alto como mínimo. Esto es lo que evita que la burbuja
    "crezca" cuando el indicador de pensando se reemplaza por la primera
    palabra de la respuesta.
  */
  min-height: 1.5rem;
}
.lw-burbuja--agente {
  align-self: flex-start;
  background: #f3f4f6;
  border-bottom-left-radius: 0.25rem;
}
.lw-burbuja--usuario {
  align-self: flex-end;
  background: var(--lw-acento);
  color: #fff;
  border-bottom-right-radius: 0.25rem;
}

/* El indicador hereda el acento del widget salvo dentro de una burbuja del
   agente el fondo es claro, así que el acento de marca se lee bien y no hay
   nada que ajustar. En la burbuja del usuario el fondo ES el acento, y ahí
   el indicador nunca aparece: el agente escribe, no el usuario. */

.lw-accion {
  align-self: flex-start;
  margin-top: 0.25rem;
}

/* ------------------------- tarjetas de producto ------------------------
   Fila horizontal debajo de la burbuja, hasta tres tarjetas, deslizable de
   costado. La foto va cuadrada y con `object-fit: cover`: las fotos de un
   catálogo real vienen en proporciones distintas y sin esto la fila queda con
   tres alturas.

   ⚠️ `align-self: stretch` y el margen negativo son lo que deja que la fila
   use el ancho entero del hilo en vez del 85% de una burbuja: tres tarjetas
   de 10rem no entran en 19rem de otra forma. */

.lw-productos {
  align-self: stretch;
  display: flex;
  gap: 0.5rem;
  margin: 0.125rem -1rem 0;
  padding: 0 1rem 0.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* Sin esto, el ajuste del deslizamiento pega la primera tarjeta al borde
     del panel ignorando el padding de la fila. */
  scroll-padding-inline: 1rem;
  scrollbar-width: thin;
}
.lw-producto {
  flex: 0 0 10rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--lw-fondo);
  border: 1px solid var(--lw-borde);
  border-radius: calc(var(--lw-radio) * 0.75);
}
.lw-productos[data-solo="true"] .lw-producto {
  flex-basis: 12.5rem;
}
.lw-producto img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #f3f4f6;
}
.lw-producto__cuerpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.5rem 0.625rem 0.625rem;
}
.lw-producto__titulo {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
}
.lw-producto__variante {
  margin: 0;
  font-size: 0.75rem;
  color: #6b7280;
}
.lw-producto__precio {
  margin: 0.125rem 0 0;
  font-size: 0.9375rem;
  font-weight: 700;
}
.lw-producto__acciones {
  margin-top: auto;
  padding-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.lw-producto .lw-boton {
  width: 100%;
}
.lw-producto .lw-boton:disabled {
  opacity: 0.7;
  cursor: progress;
}
.lw-producto__ver {
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  color: var(--lw-acento);
  text-decoration: none;
}
.lw-producto__ver:hover {
  text-decoration: underline;
}
.lw-producto__aviso {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: #b91c1c;
}

/* ---------------------------- barra de envío --------------------------- */

.lw-barra {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--lw-borde);
}
.lw-entrada {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--lw-borde);
  border-radius: 999px;
  font: inherit;
  font-size: 0.9375rem;
}
.lw-entrada:focus-visible {
  outline: 2px solid var(--lw-acento);
  outline-offset: 1px;
}
.lw-enviar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  flex: none;
  border: 0;
  border-radius: 999px;
  background: var(--lw-acento);
  color: #fff;
  cursor: pointer;
}

/* ------------------- formulario de degradación ------------------------- */

.lw-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.lw-form input,
.lw-form textarea {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--lw-borde);
  border-radius: 0.5rem;
  font: inherit;
  font-size: 0.9375rem;
  resize: vertical;
}

.lw-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--lw-acento);
  color: #fff;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

/* ------------------------------ celular -------------------------------- */

@media (max-width: 30rem) {
  .lw {
    right: 0.75rem;
    bottom: 0.75rem;
  }
  .lw-panel {
    width: calc(100vw - 1.5rem);
    height: calc(100dvh - 6rem); /* dvh: la barra del navegador móvil no lo
                                    corta a la mitad */
  }
}