/* Asistente de la web pública.
   Estilos aparte para que se pueda incluir en cualquier página sin tocar su
   hoja de estilos, y sin que herede tamaños raros de la página anfitriona. */

/* ═══════════════════════════════════════════════════════════════════════
   `hidden` tiene que ganar SIEMPRE.

   El atributo `hidden` lo oculta todo mediante una regla del navegador,
   `[hidden]{display:none}`, con especificidad de un atributo. En cuanto la
   hoja de estilos dice `.bpa{display:flex}` —misma especificidad, pero hoja
   de autor— gana el flex y el elemento NO se oculta.

   Consecuencia real: el panel del asistente quedaba fijo sobre la esquina
   inferior derecha, 400 por 620 píxeles, tapando lo que hubiera debajo. La X
   ponía `hidden = true` y no pasaba nada visible. Desde fuera parecía que el
   asistente no se cerraba y que había zonas de la página donde no se podía
   hacer clic. Era eso: había un panel invisible al criterio pero muy presente
   al ratón.

   Esta regla va la PRIMERA de la hoja y con !important a propósito. Es la
   clase de fallo que no se ve leyendo el código —el JS es correcto— y que
   solo aparece usando la página.
   ═══════════════════════════════════════════════════════════════════════ */
[hidden]{display:none!important}

.bpa-lanz{position:fixed;right:16px;bottom:16px;z-index:9000;display:flex;align-items:center;gap:9px;
  background:#0d2240;color:#fff;border:none;border-radius:30px;padding:13px 20px 13px 16px;
  font-family:'Poppins',system-ui,sans-serif;font-weight:700;font-size:14px;cursor:pointer;
  box-shadow:0 6px 24px rgba(13,34,64,.3);line-height:1}
.bpa-lanz:hover{background:#16335a}
.bpa-lanz svg{width:20px;height:20px;flex:none}
/* En el teléfono el lanzador pasa a ser un círculo con solo el icono.
   Con el texto «¿Te ayudo?» medía 138 px de ancho y, al desplazar el
   catálogo, se plantaba encima del botón «+» de añadir al carrito de la
   tarjeta que quedara abajo a la derecha: el usuario iba a comprar y le
   abría el chat. El círculo de 52 px deja libre esa esquina.

   El texto no se borra, se oculta con `.solo-lector`: quien navegue con
   lector de pantalla sigue oyendo «¿Te ayudo?» y no un botón sin nombre.
   Los 52 px superan los 44 px de destino táctil recomendado. */
@media(max-width:640px){
  .bpa-lanz{right:14px;bottom:14px;width:52px;height:52px;padding:0;
            justify-content:center;gap:0;border-radius:50%}
  .bpa-lanz svg{width:23px;height:23px}
  .bpa-lanz-t{position:absolute;width:1px;height:1px;overflow:hidden;
              clip:rect(0 0 0 0);white-space:nowrap}
}

.bpa{position:fixed;right:16px;bottom:16px;z-index:9001;width:min(400px,calc(100vw - 24px));
  height:min(620px,calc(100vh - 32px));background:#fff;border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 18px 60px rgba(13,34,64,.34);
  font-family:'Inter',system-ui,sans-serif;color:#54657a;line-height:1.55}
@media(max-width:640px){.bpa{right:0;bottom:0;width:100vw;height:100dvh;border-radius:0}}

.bpa-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#0d2240;color:#fff;padding:13px 15px;flex:none}
.bpa-cab-i{display:flex;align-items:center;gap:10px;min-width:0}
.bpa-av{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.13);
  display:flex;align-items:center;justify-content:center;flex:none}
.bpa-av svg{width:17px;height:17px}
.bpa-cab b{display:block;font-family:'Poppins',sans-serif;font-size:14px;line-height:1.25}
.bpa-cab i{display:block;font-style:normal;font-size:11.5px;color:#8fb4e0}
/* 30×27 px sobre un panel que en móvil ocupa la pantalla entera y bloquea
   el scroll de la página. Si se falla el toque no hay Escape ni fondo
   pulsable: el usuario se queda atrapado. */
.bpa-x{background:none;border:none;color:#8fb4e0;font-size:19px;cursor:pointer;padding:4px 7px;line-height:1;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
.bpa-x:hover{color:#fff}

.bpa-hilo{flex:1;overflow-y:auto;padding:16px 15px;background:#f4f8fd;-webkit-overflow-scrolling:touch}
.bpa-msg{display:flex;margin-bottom:11px}
.bpa-msg.yo{justify-content:flex-end}
.bpa-b{max-width:86%;padding:11px 14px;border-radius:15px;font-size:14px;line-height:1.6;word-wrap:break-word}
.bpa-msg.bot .bpa-b{background:#fff;color:#0d2240;border:1px solid #e2ebf7;border-bottom-left-radius:5px}
.bpa-msg.yo .bpa-b{background:#0d2240;color:#fff;border-bottom-right-radius:5px}
.bpa-esp .bpa-b{color:#8fa3ba;letter-spacing:3px;animation:bpaLat 1.2s ease-in-out infinite}
@keyframes bpaLat{0%,100%{opacity:.35}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.bpa-esp .bpa-b{animation:none}}

.bpa-wa{display:block;margin-top:10px;background:#178551;color:#fff;text-align:center;
  padding:10px 13px;border-radius:10px;font-family:'Poppins',sans-serif;font-weight:700;
  font-size:13px;text-decoration:none}
.bpa-wa:hover{background:#12784a}

/* El registro. Aparece DESPUÉS de que la persona escribió su pregunta:
   cuando ya sabe qué quiere saber, dejar el correo cuesta mucho menos. */
.bpa-reg{flex:none;padding:16px 15px;background:#fff;border-top:1px solid #e2ebf7}
.bpa-reg b{display:block;font-family:'Poppins',sans-serif;font-size:14.5px;color:#0d2240;margin-bottom:4px}
.bpa-reg p{font-size:12.5px;margin:0 0 11px;line-height:1.55}
.bpa-reg input{width:100%;padding:11px 13px;border:1.5px solid #d6e3f2;border-radius:10px;
  font-size:16px;font-family:inherit;color:#0d2240;background:#fbfdff;margin-bottom:8px}
.bpa-reg input:focus{outline:none;border-color:#3f6fb0;background:#fff}
.bpa-ok{width:100%;background:#178551;color:#fff;border:none;border-radius:10px;padding:12px;
  font-family:'Poppins',sans-serif;font-weight:700;font-size:14px;cursor:pointer}
.bpa-ok:hover{background:#12784a}
.bpa-err{display:block;font-style:normal;font-size:12px;color:#b4232a;margin-top:7px}

.bpa-sug{flex:none;display:flex;gap:7px;flex-wrap:wrap;padding:0 15px 10px;background:#f4f8fd}
.bpa-sug:empty{padding:0}
.bpa-chip{background:#fff;border:1px solid #cfe0f3;color:#3f6fb0;border-radius:18px;
  padding:8px 13px;font-size:12.5px;font-family:inherit;cursor:pointer;line-height:1.3}
.bpa-chip:hover{border-color:#3f6fb0;background:#f0f6fd}

.bpa-pie{flex:none;display:flex;gap:8px;padding:11px 13px;background:#fff;border-top:1px solid #e2ebf7}
.bpa-pie input{flex:1;padding:11px 14px;border:1.5px solid #d6e3f2;border-radius:22px;
  font-size:16px;font-family:inherit;color:#0d2240;background:#fbfdff;min-width:0}
.bpa-pie input:focus{outline:none;border-color:#3f6fb0;background:#fff}
.bpa-pie button{flex:none;width:44px;height:44px;border-radius:50%;background:#0d2240;color:#fff;
  border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.bpa-pie button:hover{background:#16335a}
.bpa-pie svg{width:19px;height:19px}

.bpa-legal{flex:none;font-size:10.5px;color:#8fa3ba;text-align:center;margin:0;
  padding:0 14px 11px;background:#fff;line-height:1.5}
.bpa-legal b{color:#54657a}

@media print{.bpa,.bpa-lanz{display:none!important}}