/* `body` DELANTE DE TODO, Y NO ES ADORNO.
   La hoja del widget se inyecta cuando carga su script, o sea DESPUES
   que esta, y con la misma especificidad y `!important` en las dos
   gana la ultima. Medido: `left` y `height` si se aplicaban y `width`
   y `bottom` no, segun cuales llevaran `!important` alla. Con `body`
   delante la especificidad sube de 1,0,0 a 1,0,1 y deja de depender
   del orden de carga.
   Los tokens se declaran aqui: varios hooks definen `--nb-paper` y
   `--nb-line` con valores distintos en su propio `:root`. */
body #wasapi-widget-button{
  --w-paper:#FFFFFF;
  --w-line:#E9E4F3;
  --w-violet:#7B5CF6;

  /* mismo tamano y sitio que los otros dos flotantes.
     `min-width` TAMBIEN, y esta es la clave: el widget declara
     `#wasapi-widget-button{min-width:50px}` y un minimo NO COMPITE
     con el ancho, lo ACOTA. Da igual la especificidad y da igual el
     `!important`: los 48 px se aplicaban y el minimo los volvia a
     subir a 50. Se veia en que la altura si obedecia y el ancho no.
     Se pregunto con `CSS.getMatchedStylesForNode`, que es la unica
     forma de ver esto sin adivinar. */
  width:48px !important; height:48px !important;
  min-width:48px !important; max-width:48px !important;
  min-height:48px !important; max-height:48px !important;
  border-radius:50% !important;
  left:18px !important; right:auto !important; bottom:18px !important;
  margin:0 !important;

  background:var(--w-paper) !important;
  border:1px solid var(--w-line) !important;
  box-shadow:0 2px 6px rgba(123,92,246,0.10),
             0 14px 30px -14px rgba(123,92,246,0.26) !important;
  transition:transform 0.24s ease, box-shadow 0.24s ease,
             border-color 0.24s ease !important;
  overflow:visible !important;
  display:flex !important; align-items:center; justify-content:center;
}
body #wasapi-widget-button:hover{
  transform:translateY(-3px) !important;
  border-color:var(--w-violet) !important;
  box-shadow:0 4px 10px rgba(20,17,31,0.1),
             0 20px 40px -16px rgba(90,60,200,0.44) !important;
}

/* EL ICONO. Las OPCIONES del widget no dejan cambiarlo, pero el
   elemento es un `<img>` corriente: el guion de abajo le cambia el
   `src` por el isotipo y aqui solo se le da la medida. Mas simple
   que ocultarlo y repintarlo con un pseudoelemento, que es lo que
   hacia la primera version. */
body #wasapi-widget-button img{
  width:27px !important; height:27px !important;
  display:block !important;
}

/* El distintivo de WhatsApp, para que se entienda de un vistazo.
   El glifo va incrustado como `data:` y no como fichero: asi el
   badge no depende de ninguna peticion mas, ni al servidor ni a
   terceros. */
body #wasapi-widget-button::after{
  content:"";
  position:absolute; right:-2px; bottom:-2px;
  width:19px; height:19px; border-radius:50%;
  background:#25D366;
  border:2px solid var(--w-paper);
  box-shadow:0 1px 3px rgba(20,17,31,0.18);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.75-.86-2.02-.96-.27-.1-.47-.15-.67.15-.2.3-.77.96-.94 1.16-.17.2-.35.22-.64.07-.3-.15-1.25-.46-2.38-1.47-.88-.78-1.47-1.75-1.65-2.05-.17-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.6-.92-2.2-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.88 1.22 3.08c.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.7.63.71.23 1.36.19 1.87.12.57-.09 1.75-.72 2-1.41.25-.7.25-1.29.17-1.41-.07-.13-.27-.2-.57-.35z'/%3E%3C/svg%3E");
  background-size:13px 13px; background-position:center; background-repeat:no-repeat;
}

/* ══ LA TARJETA DE CHAT ═══════════════════════════════════════
   De serie viene con el traje de WhatsApp: cabecera plana, fondo
   beige `#EAE6DF` y, en la zona de mensajes, una imagen que se
   descarga de `app.wasapi.io`.

   PERO CASI NINGUNA DE SUS PIEZAS TIENE CLASE. Inspeccionado el
   arbol: de los catorce elementos de la tarjeta solo tres la llevan,
   y la propia tarjeta comparte `wasapi-widget-general-align` con el
   boton flotante. Los intentos anteriores fallaban por eso, no por
   la cascada: los selectores no encontraban nada.

   Encadenar `:nth-child` funcionaria hoy y se romperia el dia que
   Wasapi anada un `<div>`. Asi que las clases las pone el guion de
   abajo —`nb-wa-*`— y aqui se estila por ellas. Si el widget cambia
   de estructura, deja de aplicarse el color: no se rompe la pagina. */
body .nb-wa-card{
  background:#FAF8FE !important;
  border:1px solid #E9E4F3 !important;
  border-radius:16px !important;
  box-shadow:0 2px 6px rgba(123,92,246,0.10),
             0 26px 60px -22px rgba(20,17,31,0.34) !important;
  overflow:hidden !important;
  left:18px !important; right:auto !important;
  /* SEPARADA DEL BOTON, no encima de el.
     Y OJO A LA PROPIEDAD: el widget coloca la tarjeta con
     `bottom:0` mas `margin-bottom:60px`, no con `bottom`. Escribir
     `bottom:80px` no hacia nada porque no es ahi donde vive la
     medida; se veia en que la tarjeta seguia a 60 px y se montaba
     seis sobre el flotante.
     La cuenta: 18 del boton + 48 de alto + 14 de aire = 80. */
  bottom:0 !important;
  margin-bottom:80px !important;
}

/* EL DEGRADADO, EN UNA SOLA PIEZA Y SIN DESPLAZAR.
   La franja de 10 px de arriba llevaba su propio degradado y la
   cabecera otro corrido con `background-position:0 -10px` para
   fingir continuidad. El resultado era un degradado partido, con un
   salto de color en la union: eso era lo que se veia mal.
   La franja se retira —no aporta nada— y la cabecera se queda con
   el degradado limpio, entero y sin tocar. */
body .nb-wa-franja{display:none !important}
body .nb-wa-cabecera{
  background:linear-gradient(135deg,#4A90D9 0%,#7B5CF6 50%,#E84098 100%) !important;
  border:0 !important;
}
/* EL AVATAR, EN BLANCO Y CON EL LOGO DENTRO.
   El isotipo es azul, violeta y rosa: puesto sobre el degradado de la
   cabecera —que son esos mismos colores— se disuelve. Con el disco
   blanco detras recupera el contraste y ademas repite la forma del
   boton flotante, que tambien es una nube sobre blanco. */
body .nb-wa-cabecera > img{
  background:#FFFFFF !important;
  border-radius:50% !important;
  padding:9px !important;
  box-sizing:border-box !important;
  box-shadow:0 2px 8px rgba(20,17,31,0.18) !important;
  object-fit:contain !important;
}
body .wasapi-widget-chat-card-header-content{background:none !important}
body .wasapi-widget-chat-card-header-content > div:first-child{
  font-family:"Outfit",system-ui,sans-serif !important;
  font-weight:700 !important; letter-spacing:-0.01em;
}
/* El subtitulo se cortaba en su hueco de 163 px. Se acorta el texto
   en las opciones y aqui va el cinturon: si alguien lo alarga, se
   corta con puntos suspensivos en vez de romper la caja. */
body .wasapi-widget-chat-card-header-content > div:last-child{
  font-family:"Figtree",system-ui,sans-serif !important;
  font-size:0.78rem !important; opacity:0.94;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Fuera la imagen de fondo de WhatsApp: una peticion mas a un
   tercero, y ademas no pega con la marca. */
body .nb-wa-cuerpo{
  background:#FAF8FE !important;
  background-image:none !important;
}
body .wasapi-widget-chat-card-content-message{
  background:#FFFFFF !important;
  border:1px solid #E9E4F3 !important;
  border-radius:12px !important;
  box-shadow:0 1px 2px rgba(20,17,31,0.05) !important;
}
body .wasapi-widget-chat-card-content-message > div:first-child{
  font-family:"Outfit",system-ui,sans-serif !important;
  font-weight:700 !important; color:#14111F !important;
}
body .wasapi-widget-chat-card-content-message > div:last-child{
  font-family:"Figtree",system-ui,sans-serif !important;
  color:#4C4560 !important; line-height:1.6 !important;
}
/* El pie traia un negro translucido sobre el beige. */
body .nb-wa-pie{
  background:#FFFFFF !important;
  border-top:1px solid #E9E4F3 !important;
}
/* El boton de accion, con el degradado y sin borde: asi no hace
   falta `background-clip`, que es donde suele reaparecer el filo. */
body .nb-wa-pie > a{
  background:linear-gradient(135deg,#4A90D9 0%,#7B5CF6 50%,#E84098 100%) !important;
  border:0 !important; border-radius:11px !important;
  box-shadow:0 10px 28px -10px rgba(123,92,246,0.55) !important;
}
body .nb-wa-pie > a span{
  color:#FFFFFF !important;
  font-family:"Outfit",system-ui,sans-serif !important;
  font-weight:600 !important;
}
/* El icono de WhatsApp del boton de accion sí se queda: ahi es donde
   toca decir a donde lleva. Se pasa a blanco para que no chirrie
   sobre el degradado. */
body .nb-wa-pie > a img{filter:brightness(0) invert(1) !important}

@media (max-width:520px){
  body .nb-wa-card{
    left:12px !important; right:12px !important; width:auto !important;
    margin-bottom:74px !important;   /* 12 + 48 + 14 */
  }
}

/* En movil, los mismos 12 px que usan los otros dos flotantes. */
@media (max-width:520px){
  body #wasapi-widget-button{left:12px !important; bottom:12px !important}
}

/* Ahora se llega tabulando (ver `interruptor()`), asi que el foco
   tiene que verse. Mismo anillo que los otros dos flotantes. */
body #wasapi-widget-button:focus-visible{
  outline:2px solid #7B5CF6 !important; outline-offset:3px !important;
}

@media (prefers-reduced-motion:reduce){
  body #wasapi-widget-button{transition:none !important}
  body #wasapi-widget-button:hover{transform:none !important}
}