/* ==========================================================================
   bb2026 — BURBUJA DE WHATSAPP (en todas las paginas).

   Namespace .bb-wa. No toca ninguna otra pieza del tema.

   ############ POR QUE NO ES VERDE WHATSAPP #############################
   El verde de marca de WhatsApp (#25D366) es un neon al lado de esta
   paleta —papel #F7F5F2, tinta #1C1B19, acento #2E4A42— y en una web de
   fotografia una pelota fosforescente fija en pantalla compite con las
   fotos, que es justo lo que no puede pasar aqui.

   Se usa el VERDE DE ACENTO del tema con el glifo en papel. Lo que hace
   reconocible el boton no es el color sino la SILUETA del globo con el
   auricular, que se mantiene exacta. Si algun dia se prefiere el verde
   oficial, es cambiar las dos lineas marcadas mas abajo y nada mas.
   #######################################################################

   CONTRASTE MEDIDO (metodo del resto de hojas del proyecto: linealizacion
   sRGB y (L1+0.05)/(L2+0.05)):
     glifo --bb-paper #F7F5F2 sobre circulo --bb-accent #2E4A42 -> 8,87:1
     (el mismo par que ya usan los enlaces de acento sobre papel, al
     reves). Cumple AA y AAA para elemento grafico.

   CAPAS: 280. Por debajo del scrim (290) y del overlay del menu (300) a
   proposito: con el menu abierto la burbuja tiene que quedar tapada. Por
   encima de todo el contenido (0-99). Ver la tabla de capas en base.css.
   ========================================================================== */

.bb-wa {
  position: fixed;
  z-index: 280;
  right: var(--bb-s3);
  bottom: var(--bb-s3);

  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;

  /* --- LAS DOS LINEAS DEL COLOR (ver cabecera) --- */
  background: var(--bb-accent);
  color: var(--bb-paper);

  /* Sombra muy baja: separa del fondo sin parecer un boton de aplicacion. */
  box-shadow: 0 6px 24px rgba(28, 27, 25, 0.18);

  transition:
    transform 0.35s var(--bb-ease),
    box-shadow 0.35s var(--bb-ease),
    background 0.35s var(--bb-ease);
}

.bb-wa__svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
  /* El glifo no hereda el trazo de los iconos del tema: es relleno. */
  stroke: none;
}

/* --------------------------------------------------------------------------
   ETIQUETA "WHATSAPP"

   Sale al pasar por encima, a la IZQUIERDA del circulo. Es decorativa
   (aria-hidden en el marcado): el nombre accesible del enlace ya lo da su
   aria-label, que ademas dice el numero y que se abre en otra pestania.

   No se usa 'display: none' -> 'block' porque eso no se puede animar.
   Se oculta con opacidad y desplazamiento, y con pointer-events: none
   para que no capture el raton cuando no se ve.
   -------------------------------------------------------------------------- */
.bb-wa__tip {
  position: absolute;
  right: calc(100% + 10px);
  white-space: nowrap;
  padding: 6px 12px;
  background: var(--bb-ink);
  color: var(--bb-paper);   /* 15,8:1 */
  font-family: var(--bb-font-display);
  font-weight: 500;
  font-size: 0.6875rem;   /* 11px */
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: 1.4;

  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition:
    opacity 0.3s var(--bb-ease),
    transform 0.3s var(--bb-ease);
}

.bb-wa:hover,
.bb-wa:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(28, 27, 25, 0.26);
  background: var(--bb-ink);
}
.bb-wa:hover .bb-wa__tip,
.bb-wa:focus-visible .bb-wa__tip {
  opacity: 1;
  transform: translateX(0);
}

/* Foco visible propio: el circulo no tiene borde, asi que el anillo va
   fuera con outline-offset. Nunca se quita el outline sin poner otro. */
.bb-wa:focus-visible {
  outline: 2px solid var(--bb-ink);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   MOVIL

   Un poco mas pequenia y mas pegada a la esquina. La etiqueta NO se pinta:
   en una pantalla estrecha ocuparia un tercio del ancho y ademas no hay
   'hover' con el que sacarla.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .bb-wa {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }
  .bb-wa__svg { width: 26px; height: 26px; }
  .bb-wa__tip { display: none; }
}

/* Quien pide menos movimiento no recibe ninguno: el boton sigue
   cambiando de color y de sombra, que es informacion de estado, pero no
   se desplaza. */
@media (prefers-reduced-motion: reduce) {
  .bb-wa,
  .bb-wa__tip { transition: none; }
  .bb-wa:hover,
  .bb-wa:focus-visible { transform: none; }
}

/* En impresion no pinta nada: un boton de chat en un papel no sirve. */
@media print {
  .bb-wa { display: none; }
}