/* src/ui/estilos/widget-whatsapp.css
 *
 * Widget flotante de contacto, portado casi verbatim de app-referencia.html
 * (líneas 6209-6507, "réplica exacta iriartelaw.com"). Se aísla en su propia hoja
 * a propósito, igual que la referencia lo hace en su propio <style>: es un bloque
 * de "chrome" de marca con su propia fuente (Arial, no Poppins) y sus propios
 * colores hardcodeados, y no debe alimentarse del sistema de tokens del resto de
 * la app. Solo reutiliza `--z-widget` para el apilamiento.
 *
 * Diferencias deliberadas frente a la referencia: se quitó el pie "Powered by
 * NinjaTeam" (promoción de un plugin de terceros ajeno a este proyecto) y el
 * avatar usa el logo de IA Law inline en vez de una imagen remota, para que
 * dist/ funcione sin conexión.
 */

.wa__btn_popup,
.wa__btn_popup *,
.wa__btn_popup ::after,
.wa__btn_popup ::before,
.wa__popup_chat_box,
.wa__popup_chat_box *,
.wa__popup_chat_box ::after,
.wa__popup_chat_box ::before {
  box-sizing: border-box;
}

#wa-widget {
  position: fixed;
  z-index: var(--z-widget);
}

.wa__btn_popup {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: flex;
  align-items: center;
  cursor: pointer;
  z-index: var(--z-widget);
  border: none;
  background: none;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.wa__btn_popup_icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-wa-green);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: rgba(45, 183, 66, 0.35) 0 4px 16px;
  position: relative;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.wa__btn_popup:hover .wa__btn_popup_icon { transform: scale(1.06); }

.wa__btn_popup_icon svg { width: 32px; height: 32px; }

.wa__popup_chat_box {
  position: fixed;
  bottom: 102px;
  right: 30px;
  width: min(351px, calc(100vw - 40px));
  border-radius: 5px 5px 8px 8px;
  box-shadow: rgba(0, 0, 0, 0.04) 0 10px 10px 4px, rgba(0, 0, 0, 0.04) 0 -2px 16px 0;
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
  z-index: calc(var(--z-widget) - 1);
  background: #fff;
}
.wa__popup_chat_box.wa__abierto {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.wa__popup_heading {
  background: var(--color-wa-green);
  padding: 15px 43px 17px 74px;
  position: relative;
}
.wa__popup_heading .wa__popup_avatar-header {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.wa__popup_heading .wa__popup_avatar-header svg,
.wa__popup_heading .wa__popup_avatar-header img { width: 30px; height: 30px; }

.wa__popup_title { color: #fff; font-size: 18px; font-weight: 700; margin: 0 0 3px; line-height: 1.3; }
.wa__popup_intro { color: rgb(217, 235, 198); font-size: 12px; margin: 0; line-height: 1.4; }
.wa__popup_intro strong { color: #fff; }

.wa__popup_content { background: #fff; padding: 10px 10px 8px; }
.wa__popup_notice { font-size: 11px; color: #888; padding: 0 2px 8px; }

.wa__stt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgb(245, 247, 249);
  border-radius: 3px;
  padding: 10px 12px;
  text-decoration: none !important;
  transition: background 0.15s;
  color: inherit;
}
.wa__stt:hover { background: #eaf4ea; }

.wa__popup_avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; position: relative; }
.wa__popup_avatar svg, .wa__popup_avatar img { width: 100%; height: 100%; object-fit: cover; }
.wa__stt_online .wa__popup_avatar::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: #44d162;
  border-radius: 50%;
  border: 2px solid #fff;
  bottom: 0;
  right: 0;
}

.wa__popup_txt { flex: 1; }
.wa__member_name { font-size: 14px; font-weight: 600; color: rgb(54, 60, 71); line-height: 1.3; }
.wa__member_duty { font-size: 11px; color: #888; }

.wa__stt-flecha { width: 22px; height: 22px; flex-shrink: 0; }

@media (max-width: 420px) {
  .wa__btn_popup { right: 16px; bottom: 16px; }
  .wa__popup_chat_box { right: 16px; bottom: 88px; }
}