/* ==========================================================================
   Asistente ISES — botón flotante y tarjetas de producto
   --------------------------------------------------------------------------
   Quedan DOS cosas aquí:

   1. El botón flotante de la esquina. Ya no abre un panel de conversación:
      LLEVA a la ventana del asistente (#sectionAsistente). Dentro de ella se
      oculta, y eso lo hace css/asistente-ventana.css.
   2. Las tarjetas de producto (foto, precio y liga a Syscom) que se pintan
      bajo una respuesta. Se quedan en este archivo y no se mudaron a la hoja
      de la ventana porque el dibujo lo comparte js/asistente.js: es la misma
      tira, y quien la pinta le pasa el contenedor.

   Lo que YA NO está: el panel de conversación, sus burbujas, su barra de
   entrada, su indicador de escritura y las opciones Chat/Hablar del botón.
   Todo eso murió cuando el asistente pasó a tener ventana propia — un panel
   de 380px no puede enseñar una tabla de partidas ni una tarjeta de cifras,
   que es justo lo que este asistente contesta.

   Usa los tokens del tema oscuro de css/styles.css (:root). El botón solo se
   ve con sesión activa (clase que pone app.js en <body>).
   ========================================================================== */

/* ------------------------- Botón flotante (FAB) -------------------------- */

.asistente-wrap {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 950; /* debajo de los modales (que usan z-index mayor) */
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

/* Solo aparece cuando hay sesión iniciada (clase que pone app.js en <body>). */
body.sesion-activa .asistente-wrap {
  display: flex;
}


.asistente-fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  background: linear-gradient(135deg, var(--accent-deep), var(--accent));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow), 0 0 18px rgba(106, 166, 242, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.asistente-fab:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: var(--shadow-lg), 0 0 24px rgba(106, 166, 242, 0.5);
}

.asistente-fab svg {
  width: 26px;
  height: 26px;
  transition: transform 0.22s ease;
}


/* ------------------- Tarjetas de producto bajo la respuesta ----------------
   El chat es texto plano (se lee en voz alta), así que la foto y el enlace al
   mayorista van aquí y no dentro de la burbuja. Tira horizontal: caben varias
   opciones sin empujar la conversación fuera de pantalla. */

.asistente-tarjetas {
  align-self: stretch;
  /* flex: 0 0 auto es OBLIGATORIO, no cosmético. La tira cuelga de una columna
     flex (hoy .asv-turno; antes era el panel), y ahí un hijo con el
     flex-shrink por omisión (1) se aplasta en cuanto la conversación no cabe:
     medido en vivo, la tira quedaba en 4 px con 251 px de contenido, y las
     tarjetas en 2 px de alto. Las burbujas de texto se salvaban por su altura
     mínima de línea; estas no tienen texto propio que las sostenga. */
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  /* SIN scrollbar-width. El tema ya define las barras (::-webkit-scrollbar de
     8px, riel transparente) y son SUPERPUESTAS: no ocupan sitio. En cuanto se
     declara scrollbar-width, Chrome ignora esas reglas y dibuja la clásica, que
     además come 10px de alto —medido— y empujaba la burbuja de acción contra la
     tira. Se hereda la convención del tema y la barra vuelve a flotar.

     overscroll-behavior + scroll-snap: mismo patrón que .cat-cats, la otra
     tira horizontal de la app. El scroll lateral no arrastra la página detrás y
     las tarjetas encajan al borde en vez de quedar cortadas a la mitad. */
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}

.asistente-tarjeta {
  flex: 0 0 158px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface-2);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.asistente-tarjeta:hover { border-color: var(--line-strong); }

/* ELEGIDA. Cuando el asistente propone tres equipos parecidos, tocar uno es la
   forma de decirle "hablo de este": el modelo lo recibe en el contexto y deja
   de adivinar a cuál se refiere "ese". La marca es el borde de acento más la
   paloma de la esquina; no se usa color de fondo fuerte porque la tarjeta lleva
   una foto y competirían. */
.asistente-tarjeta.elegida {
  border-color: var(--accent);
  background: var(--accent-surface);
}

.asistente-tarjeta.elegida .asistente-tarjeta-foto::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  /* La paloma va dibujada en el propio fondo: una tarjeta no debería necesitar
     un nodo extra solo para enseñar que está elegida. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.asistente-tarjeta-foto {
  position: relative;
  /* Misma razón que la tira: la tarjeta es una columna flex y sin esto la
     franja de la foto es lo primero que cede cuando algo la aprieta. */
  flex: 0 0 94px;
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Mismo panel liso con luz suave desde arriba que .cat-card-foto: es el
     mismo objeto (la foto de un producto) y tiene que verse igual en el
     catálogo y en el chat. El fondo plano de antes era una pieza suelta. */
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 62%),
    linear-gradient(165deg, var(--surface-2), var(--surface));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid var(--line-soft);
}

.asistente-tarjeta-foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Mismo marcador que el catálogo cuando el producto no tiene foto
   (.cat-card-nofoto): misma tipografía, mismo cuerpo y mismo tracking. */
.asistente-tarjeta-nofoto {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--faint);
}

.asistente-tarjeta-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 9px 9px;
}

.asistente-tarjeta-nombre {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-strong);
  /* Dos líneas y elipsis: los nombres del catálogo son largos y si no, cada
     tarjeta de la tira quedaría de una altura distinta. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.asistente-tarjeta-meta {
  margin: 0;
  font-size: 0.66rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asistente-tarjeta-precio {
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-strong);
}

.asistente-tarjeta-acciones {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin-top: 7px;
}

.asistente-tarjeta-agregar {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  background: var(--accent-surface);
  color: var(--accent);
  font-family: inherit;
  font-size: 0.68rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.asistente-tarjeta-agregar:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
}

.asistente-tarjeta-agregar:disabled {
  opacity: 0.6;
  cursor: default;
}

.asistente-tarjeta-agregar:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* En el catálogo esta liga va pegada al modelo y puede ir a 9.5px con --faint.
   Aquí es una de las dos acciones de la tarjeta, así que sube a 10.5px y a
   --muted: sobre --surface-2 pasa de ~5:1 a ~11:1 y se lee sin forzar la vista.
   Sigue siendo la acción secundaria: el botón de agregar es el que pesa. */
.asistente-tarjeta-syscom {
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.asistente-tarjeta-syscom:hover { color: var(--accent); }

.asistente-tarjeta-syscom:focus-visible {
  outline: none;
  border-radius: 4px;
  box-shadow: var(--ring);
  color: var(--accent);
}

/* Las transiciones de la tarjeta son de estado (hover/foco), no decorativas,
   pero aun así se respetan las preferencias del sistema. */
@media (prefers-reduced-motion: reduce) {
  .asistente-tarjeta-agregar,
  .asistente-tarjeta-syscom {
    transition: none;
  }

  .asistente-tarjetas {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }
}

/* ------------------------------ Móvil ------------------------------------ */

@media (max-width: 560px) {
  .asistente-wrap {
    right: 14px;
    bottom: 14px;
  }
}

/* ---------------------- Botón arrastrable (solo móvil) --------------------
   En el móvil la esquina de abajo a la derecha es zona disputada: ahí caen el
   pulgar, la barra de gestos y el dock del tema, y el botón acababa tapando
   justo lo que el usuario quería tocar. Con esto se puede coger y soltar donde
   estorbe menos, y ahí se queda entre sesiones (localStorage).

   Toda la mecánica está en js/asistente-arrastrable.js, que es quien pone
   `.movido` y escribe `left`/`top`. Sin ese archivo estas reglas no llegan a
   aplicarse nunca y el botón se queda en su esquina de siempre.
   ========================================================================== */

@media (max-width: 759px) {
  /* Sin esto el navegador se queda el gesto para desplazar la página y el
     arrastre no llega a empezar. */
  .asistente-fab { touch-action: none; }

  /* Movido, el envoltorio deja de anclarse a la esquina y pasa a valer
     exactamente lo que mide el botón: las opciones salen del flujo y se
     cuelgan de él. Así la caja que se arrastra y la que se ve son la MISMA, y
     colocar el botón es escribir su left/top, sin restarle el alto de unas
     opciones que ni siquiera están abiertas. */
  .asistente-wrap.movido {
    right: auto;
    bottom: auto;
    gap: 0;
  }
/* Mientras se arrastra no hay transiciones que perseguir ni realce de
     pulsación: el botón tiene que ir pegado al dedo. */
  .asistente-wrap.arrastrando .asistente-fab {
    transition: none;
    transform: scale(1.08);
    box-shadow: var(--shadow-lg), 0 0 26px rgba(106, 166, 242, 0.55);
  }

  /* SE APARTA MIENTRAS SE DESPLAZA LA PANTALLA.
     Colocarlo donde menos estorbe no basta: es un botón FIJO sobre contenido
     que SE MUEVE, así que tarde o temprano queda encima de algo. Medido: el
     correo del cliente en Nueva cotización, el selector de unidades de la
     Calculadora y el segmentado de vista del catálogo pasaban por debajo y
     dejaban de responder al toque, enteros a la vista. No hay esquina buena
     para él; lo que hay es apartarse.

     Se desvanece con opacidad y suelta el puntero, NUNCA con `display: none`:
     eso cortaría un arrastre en curso. Lo enciende y apaga
     js/asistente-arrastrable.js. */
  .asistente-wrap { transition: opacity 0.2s ease; }
  .asistente-wrap.apartado {
    opacity: 0;
    pointer-events: none;
  }
}

/* En una pantalla táctil el `:hover` no se va al levantar el dedo: se queda
   pegado hasta que se toca otra cosa. Con el botón quieto en su esquina
   apenas se notaba; arrastrándolo, el botón se quedaba levantado y crecido
   justo donde lo acaban de soltar. */
@media (hover: none) {
  .asistente-fab:hover {
    transform: none;
    box-shadow: var(--shadow), 0 0 18px rgba(106, 166, 242, 0.35);
  }
}