/* ==========================================================================
   css/whatsapp.css — dueño B (módulo B: chat de WhatsApp dentro del iPhone)
   Todo bajo `.wa` (#pantalla). Tokens de docs/research-ui.md (§1 claro, §2 oscuro,
   §3 tipografía, §4 burbujas, §5 chrome, §6 mensajes Cloud API).
   Clases: .wa-row .in .out .bubble .meta .tick .tick-read, colas con clip-path,
   .qr-btns .qr-btn, .tpl-*, .cta-*, .carousel .card, .doc-* .audio-* .loc-*
   .contact-* .sticker-*, .sheet*. Keyframes con prefijo wam-.
   ========================================================================== */

/* ---------- 1. Tokens — modo claro (research-ui §1) ---------- */
.wa {
  --wa-bg-chat: #efeae2;             /* fondo chat beige */
  --wa-doodle-opacity: 0.045;        /* doodles ~4–6% */
  --wa-bubble-in: #ffffff;           /* burbuja entrante */
  --wa-bubble-out: #d9fdd3;          /* burbuja saliente */
  --wa-text: #111b21;                /* texto de burbuja */
  --wa-text-meta: #667781;           /* hora, "escribiendo…", footer plantilla */
  --wa-link: #027eb5;                /* enlaces en burbuja */
  --wa-tick: #667781;                /* ✓ enviado / ✓✓ entregado */
  --wa-tick-read: #53bdeb;           /* ✓✓ leído (celeste) */
  --wa-chrome: #f6f6f6;              /* header + compose iOS */
  --wa-chrome-text: #000000;
  --wa-compose-field: #ffffff;       /* campo "Mensaje" */
  --wa-separator: rgba(0, 0, 0, .08);/* hairlines */
  --wa-accent: #00a884;              /* verde de acento */
  --wa-accent-deep: #008069;
  --wa-ios-blue: #007aff;            /* chevron de atrás (research-ui §5) */
  --wa-sheet: #ffffff;               /* grupos del sheet de lista */

  /* posición la fija .pantalla (A: absolute inset 0); B solo aísla el
     apilamiento para el doodle en z-index:-1 y ancla .sheet */
  isolation: isolate;
  overflow: hidden;
  background: var(--wa-bg-chat);
  color: var(--wa-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Helvetica Neue", Helvetica, Arial, sans-serif; /* research-ui §3 */
  -webkit-font-smoothing: antialiased;
}

/* ---------- 2. Tokens — modo oscuro (research-ui §2) ---------- */
.wa.oscuro {
  --wa-bg-chat: #0b141a;
  --wa-doodle-opacity: 0.04;
  --wa-bubble-in: #202c33;
  --wa-bubble-out: #005c4b;
  --wa-text: #e9edef;
  --wa-text-meta: #8696a0;
  --wa-link: #53bdeb;
  --wa-tick: #8696a0;
  --wa-tick-read: #53bdeb;
  --wa-chrome: #202c33;
  --wa-chrome-text: #e9edef;
  --wa-compose-field: #2a3942;
  --wa-separator: rgba(255, 255, 255, .10);
  --wa-ios-blue: #0a84ff;
  --wa-sheet: #182229;
}

/* ---------- 3. Fondo con patrón doodle sutil (data-URI, sin red) ---------- */
.wa::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;                        /* bajo el contenido, sobre el fondo */
  pointer-events: none;
  opacity: var(--wa-doodle-opacity);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22420%22%20height%3D%22420%22%20viewBox%3D%220%200%20420%20420%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate(14%2016)%20scale(1)%22%20stroke-width%3D%221.70%22%3E%3Cpath%20d%3D%22M16%203%2019.6%2011.2%2028.5%2012%2021.7%2018%2023.6%2026.7%2016%2022.2%208.4%2026.7%2010.3%2018%203.5%2012%2012.4%2011.2Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(118%2024)%20scale(1)%22%20stroke-width%3D%221.70%22%3E%3Cpath%20d%3D%22M16%2027C5%2018%203%2010.5%208.6%206.8%2012.4%204.3%2016%207.4%2016%2010.6%2016%207.4%2019.6%204.3%2023.4%206.8%2029%2010.5%2027%2018%2016%2027Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(222%208)%20scale(1)%22%20stroke-width%3D%221.70%22%3E%3Cpath%20d%3D%22M5%2013H23V20A9%209%200%200%201%205%2020Z%22%2F%3E%3Cpath%20d%3D%22M23%2015H26A4.5%204.5%200%200%201%2026%2024H23%22%2F%3E%3Cpath%20d%3D%22M11%209C13%207%209%205%2011%203%22%2F%3E%3Cpath%20d%3D%22M18%209C20%207%2016%205%2018%203%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(336%2018)%20scale(1)%22%20stroke-width%3D%221.70%22%3E%3Cellipse%20cx%3D%2210%22%20cy%3D%2225%22%20rx%3D%224.2%22%20ry%3D%223.2%22%20transform%3D%22rotate(-14%2010%2025)%22%2F%3E%3Cpath%20d%3D%22M14%2024V6%22%2F%3E%3Cpath%20d%3D%22M14%206C18%207%2021%209.5%2021%2013%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(26%20106)%20scale(1)%22%20stroke-width%3D%221.70%22%3E%3Cpath%20d%3D%22M5%207H27A4%204%200%200%201%2031%2011V18A4%204%200%200%201%2027%2022H15L8%2028V22H5A4%204%200%200%201%201%2018V11A4%204%200%200%201%205%207Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(138%20112)%20scale(1)%22%20stroke-width%3D%221.70%22%3E%3Cpath%20d%3D%22M16%2016A2%202%200%200%201%2018%2018A4%204%200%200%201%2014%2022A6%206%200%200%201%208%2016A8%208%200%200%201%2016%208A10%2010%200%200%201%2026%2018%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(248%20102)%20scale(1)%22%20stroke-width%3D%221.70%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%223.2%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%228.4%22%20r%3D%224.6%22%2F%3E%3Ccircle%20cx%3D%2223%22%20cy%3D%2212.2%22%20r%3D%224.6%22%2F%3E%3Ccircle%20cx%3D%2223%22%20cy%3D%2219.8%22%20r%3D%224.6%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2223.6%22%20r%3D%224.6%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2219.8%22%20r%3D%224.6%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2212.2%22%20r%3D%224.6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(352%20114)%20scale(1)%22%20stroke-width%3D%221.70%22%3E%3Cpath%20d%3D%22M3%2015L29%205L21%2027L15%2019Z%22%2F%3E%3Cpath%20d%3D%22M15%2019L29%205%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(16%20216)%20scale(1)%22%20stroke-width%3D%221.70%22%3E%3Cpath%20d%3D%22M4%2028C4%2012%2016%204%2028%204%2028%2020%2016%2028%204%2028Z%22%2F%3E%3Cpath%20d%3D%22M7%2025C12%2018%2018%2012%2025%207%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(126%20210)%20scale(1)%22%20stroke-width%3D%221.70%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%225.5%22%2F%3E%3Cpath%20d%3D%22M16%203V7M16%2025V29M3%2016H7M25%2016H29M6.8%206.8L9.6%209.6M22.4%2022.4L25.2%2025.2M25.2%206.8L22.4%209.6M9.6%2022.4L6.8%2025.2%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(236%20216)%20scale(1)%22%20stroke-width%3D%221.70%22%3E%3Cpath%20d%3D%22M16%2029C16%2029%205.5%2018.8%205.5%2011.8A10.5%2010.5%200%200%201%2026.5%2011.8C26.5%2018.8%2016%2029%2016%2029Z%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2212%22%20r%3D%223.4%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(346%20210)%20scale(1)%22%20stroke-width%3D%221.70%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2211%22%2F%3E%3Cpath%20d%3D%22M11.5%2019C13.5%2022%2018.5%2022%2020.5%2019%22%2F%3E%3Cpath%20d%3D%22M12%2012.6V13.8M20%2012.6V13.8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(78%20318)%20scale(0.75)%22%20stroke-width%3D%222.27%22%3E%3Cpath%20d%3D%22M16%2027C5%2018%203%2010.5%208.6%206.8%2012.4%204.3%2016%207.4%2016%2010.6%2016%207.4%2019.6%204.3%2023.4%206.8%2029%2010.5%2027%2018%2016%2027Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(184%20320)%20scale(0.8)%22%20stroke-width%3D%222.13%22%3E%3Cpath%20d%3D%22M16%203%2019.6%2011.2%2028.5%2012%2021.7%2018%2023.6%2026.7%2016%2022.2%208.4%2026.7%2010.3%2018%203.5%2012%2012.4%2011.2Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(288%20322)%20scale(0.85)%22%20stroke-width%3D%222.00%22%3E%3Cpath%20d%3D%22M5%2013H23V20A9%209%200%200%201%205%2020Z%22%2F%3E%3Cpath%20d%3D%22M23%2015H26A4.5%204.5%200%200%201%2026%2024H23%22%2F%3E%3Cpath%20d%3D%22M11%209C13%207%209%205%2011%203%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(382%20316)%20scale(0.75)%22%20stroke-width%3D%222.27%22%3E%3Cpath%20d%3D%22M16%2016A2%202%200%200%201%2018%2018A4%204%200%200%201%2014%2022A6%206%200%200%201%208%2016A8%208%200%200%201%2016%208A10%2010%200%200%201%2026%2018%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(70%20162)%20scale(0.6)%22%20stroke-width%3D%222.83%22%3E%3Cpath%20d%3D%22M16%203%2019.6%2011.2%2028.5%2012%2021.7%2018%2023.6%2026.7%2016%2022.2%208.4%2026.7%2010.3%2018%203.5%2012%2012.4%2011.2Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(184%20162)%20scale(0.7)%22%20stroke-width%3D%222.43%22%3E%3Cellipse%20cx%3D%2210%22%20cy%3D%2225%22%20rx%3D%224.2%22%20ry%3D%223.2%22%20transform%3D%22rotate(-14%2010%2025)%22%2F%3E%3Cpath%20d%3D%22M14%2024V6%22%2F%3E%3Cpath%20d%3D%22M14%206C18%207%2021%209.5%2021%2013%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(298%20158)%20scale(0.6)%22%20stroke-width%3D%222.83%22%3E%3Cpath%20d%3D%22M16%2027C5%2018%203%2010.5%208.6%206.8%2012.4%204.3%2016%207.4%2016%2010.6%2016%207.4%2019.6%204.3%2023.4%206.8%2029%2010.5%2027%2018%2016%2027Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(148%20260)%20scale(0.65)%22%20stroke-width%3D%222.62%22%3E%3Cpath%20d%3D%22M5%207H27A4%204%200%200%201%2031%2011V18A4%204%200%200%201%2027%2022H15L8%2028V22H5A4%204%200%200%201%201%2018V11A4%204%200%200%201%205%207Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(252%20256)%20scale(0.6)%22%20stroke-width%3D%222.83%22%3E%3Cpath%20d%3D%22M16%2029C16%2029%205.5%2018.8%205.5%2011.8A10.5%2010.5%200%200%201%2026.5%2011.8C26.5%2018.8%2016%2029%2016%2029Z%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2212%22%20r%3D%223.4%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(56%20256)%20scale(0.6)%22%20stroke-width%3D%222.83%22%3E%3Cpath%20d%3D%22M3%2015L29%205L21%2027L15%2019Z%22%2F%3E%3Cpath%20d%3D%22M15%2019L29%205%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(196%20368)%20scale(0.6)%22%20stroke-width%3D%222.83%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2211%22%2F%3E%3Cpath%20d%3D%22M11.5%2019C13.5%2022%2018.5%2022%2020.5%2019%22%2F%3E%3Cpath%20d%3D%22M12%2012.6V13.8M20%2012.6V13.8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(330%20368)%20scale(0.6)%22%20stroke-width%3D%222.83%22%3E%3Cpath%20d%3D%22M4%2028C4%2012%2016%204%2028%204%2028%2020%2016%2028%204%2028Z%22%2F%3E%3Cpath%20d%3D%22M7%2025C12%2018%2018%2012%2025%207%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 420px 420px;
  background-repeat: repeat;
  filter: invert(1);                  /* trazo blanco → tinta oscura en claro */
}
.wa.oscuro::before { filter: none; }  /* en oscuro, trazo claro directo */

.wa [hidden] { display: none !important; }

/* ---------- 4. Header del chat (research-ui §5) ---------- */
.wa #chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--wa-chrome);
  color: var(--wa-chrome-text);
  border-bottom: 1px solid var(--wa-separator);
  transition: background-color .2s ease;
}
.wa .wa-back { width: 22px; flex: none; display: flex; color: var(--wa-ios-blue); }
.wa .wa-avatar,
.wa #chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--wa-separator);
}
.wa .wa-header-tit { flex: 1; min-width: 0; }
.wa .header-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa .header-sub {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--wa-text-meta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa .header-sub.wa-sub-verde { color: var(--wa-accent); }  /* "escribiendo…" */
.wa .wa-verificado { display: inline-flex; flex: none; }
.wa .wa-hicon {
  width: 24px;
  margin-left: 16px;
  flex: none;
  display: flex;
  color: var(--wa-chrome-text);
  opacity: .85;
}

/* ---------- 5. Cuerpo del chat y filas (research-ui §4) ---------- */
.wa #chat-cuerpo {
  margin: 0;
  padding: 10px 0 12px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.wa #chat-cuerpo::-webkit-scrollbar { display: none; }

.wa .wa-row { display: flex; padding: 1px 16px 0; }
.wa .wa-row + .wa-row { margin-top: 2px; }        /* mismo emisor: 2–3 px */
.wa .wa-row.grupo { margin-top: 10px; }           /* cambia emisor: 8–12 px */
.wa .wa-row.out { justify-content: flex-end; }

/* Columna interna para mensajes compuestos (burbuja + tarjeta de botones…) */
.wa .wa-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  width: min(78%, 340px);
}
.wa .out .wa-stack { align-items: flex-end; }
.wa .wa-stack > .bubble { max-width: 100%; }
.wa .wa-stack-full { width: 100%; }

/* ---------- 6. Burbuja + cola con clip-path (research-ui §4) ---------- */
.wa .bubble {
  position: relative;
  max-width: 78%;
  padding: 6px 9px 8px 7px;          /* izq≠der por la cola */
  border-radius: 18px;
  background: var(--wa-bubble-in);
  font-size: 17px;                   /* 17 pt = .body de iOS */
  line-height: 1.3;
  overflow-wrap: break-word;
  transition: background-color .2s ease;
}
.wa .out .bubble { background: var(--wa-bubble-out); }
.wa .in .bubble { border-top-left-radius: 5px; }   /* esquina de cola afilada */
.wa .out .bubble { border-top-right-radius: 5px; }

.wa .in .bubble::before {
  content: "";
  position: absolute;
  top: 0;
  left: -8px;
  width: 8px;
  height: 13px;
  background: var(--wa-bubble-in);
  clip-path: path("M8 0 H0 C4 4 6 8 8 13 Z");
}
.wa .out .bubble::before {
  content: "";
  position: absolute;
  top: 0;
  right: -8px;
  width: 8px;
  height: 13px;
  background: var(--wa-bubble-out);
  clip-path: path("M0 0 H8 C4 4 2 8 0 13 Z");
}

/* Texto del mensaje + formato WhatsApp */
.wa .wa-texto { white-space: pre-wrap; display: block; }
.wa .wa-link { color: var(--wa-link); text-decoration: none; }
.wa .wa-texto code {
  font-family: "SF Mono", Menlo, Consolas, "Courier New", monospace;
  font-size: .86em;
  background: rgba(0, 0, 0, .06);
  border-radius: 4px;
  padding: 1px 3px;
  white-space: pre-wrap;
}
.wa.oscuro .wa-texto code { background: rgba(255, 255, 255, .10); }

/* ---------- 7. Hora + ticks dentro de la burbuja (research-ui §4) ---------- */
.wa .meta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  justify-content: flex-end;
  float: right;
  margin: 6px 0 -2px 12px;
  color: var(--wa-text-meta);
  font-size: 11px;
  line-height: 1;
  user-select: none;
  position: relative;
}
.wa .meta .tick { display: block; flex: none; }
.wa .meta .tick-read { color: var(--wa-tick-read); }  /* ✓✓ celeste #53bdeb */

/* ---------- 8. Media full-bleed (image/video) ---------- */
.wa .wa-row > .wa-bubble-media { width: min(78%, 320px); max-width: 78%; padding: 0; }
.wa .wa-stack .wa-bubble-media { width: 100%; max-width: 100%; padding: 0; }
.wa .wa-media { display: block; width: 100%; border-radius: 17px; }
.wa .wa-media-wrap { position: relative; }
.wa .wa-con-caption .wa-media { border-radius: 17px 17px 0 0; }
.wa .in .wa-bubble-media .wa-media { border-top-left-radius: 4px; }
.wa .out .wa-bubble-media .wa-media { border-top-right-radius: 4px; }
.wa .in .wa-con-caption .wa-media { border-radius: 4px 17px 0 0; }
.wa .out .wa-con-caption .wa-media { border-radius: 17px 4px 0 0; }

.wa .wa-gradiente {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  border-radius: 0 0 17px 17px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .35));
  pointer-events: none;
}
.wa .meta-en-media {
  position: absolute;
  right: 7px;
  bottom: 5px;
  float: none;
  margin: 0;
  color: #fff;
  z-index: 2;
}
.wa .wa-caption { display: block; padding: 5px 9px 8px 7px; white-space: pre-wrap; }

.wa .wa-play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  pointer-events: none;
  z-index: 2;
}
.wa .wa-play-badge.wa-play-sm { width: 38px; height: 38px; }

/* ---------- 9. Audio / nota de voz (research-ui §6.7) ---------- */
.wa .bubble.wa-audio { min-width: 232px; }
.wa .audio-line { display: flex; align-items: center; gap: 8px; min-width: 208px; }
.wa .audio-play {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  background: var(--wa-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wa .audio-play svg { margin-left: 2px; }
.wa .audio-wave { flex: none; color: var(--wa-text-meta); opacity: .65; }
.wa .audio-dur { flex: none; font-size: 11px; color: var(--wa-text-meta); }
.wa .audio-icono { flex: none; display: flex; color: var(--wa-text-meta); }
.wa .audio-icono.wa-voz { color: #53bdeb; }

/* ---------- 10. Documento (research-ui §6.6) ---------- */
.wa .bubble.wa-doc { min-width: 240px; }
.wa .doc-line { display: flex; align-items: center; gap: 9px; }
.wa .doc-icono { flex: none; display: flex; }
.wa .doc-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wa .doc-nombre {
  font-size: 15px;
  font-weight: 500;
  color: var(--wa-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa .doc-sub { font-size: 12px; color: var(--wa-text-meta); }
.wa .doc-descarga {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--wa-text-meta);
  color: var(--wa-text-meta);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- 11. Sticker (sin burbuja ni hora) ---------- */
.wa .sticker-box { width: 168px; padding: 2px; }
.wa .sticker-img { display: block; width: 100%; border-radius: 12px; }

/* ---------- 12. Ubicación (research-ui §6.8) ---------- */
.wa .bubble.wa-loc { width: min(78%, 300px); padding: 0; }
.wa .loc-mapa {
  display: block;
  width: 100%;
  height: 148px;
  object-fit: cover;
  border-radius: 17px 17px 0 0;
}
.wa .in .wa-loc .loc-mapa { border-top-left-radius: 4px; }
.wa .out .wa-loc .loc-mapa { border-top-right-radius: 4px; }
.wa .loc-datos { display: block; padding: 7px 9px 8px 7px; }
.wa .loc-nombre { font-size: 15px; font-weight: 600; }
.wa .loc-dir { font-size: 13px; color: var(--wa-text-meta); margin-top: 1px; }

/* ---------- 13. Contacto (research-ui §6.9) ---------- */
.wa .bubble.wa-contact { min-width: 236px; }
.wa .contact-cab { display: flex; align-items: center; gap: 9px; padding: 2px 0; }
.wa .contact-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wa .contact-nombre {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa .contact-chev { flex: none; display: flex; color: var(--wa-text-meta); }
.wa .contact-filas { margin-top: 6px; border-top: 1px solid var(--wa-separator); }
.wa .contact-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0 2px;
  font-size: 14px;
  color: var(--wa-text);
}
.wa .contact-fila + .contact-fila { border-top: 1px solid var(--wa-separator); }
.wa .contact-fila svg { flex: none; color: var(--wa-text-meta); }
.wa .contact-fila span:last-child {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 14. Plantillas (research-ui §6.4): header→body→footer→botones ---------- */
.wa .tpl {
  width: min(78%, 340px);
  border-radius: 14px;
  overflow: hidden;
  background: var(--wa-bubble-in);
  display: flex;
  flex-direction: column;
  font-size: 17px;
  transition: background-color .2s ease;
}
.wa .tpl-media-wrap { position: relative; }
.wa .tpl-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--wa-separator);
}
.wa .tpl-header-txt { padding: 9px 10px 0; font-size: 15px; font-weight: 600; }
.wa .tpl-header-doc {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid var(--wa-separator);
}
.wa .tpl-header-doc span:last-child {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa .tpl-body { padding: 8px 10px; font-size: 15px; white-space: pre-wrap; }
.wa .template-footer { font-size: 12px; color: var(--wa-text-meta); }

/* Pie común (footer gris + hora/ticks) dentro de plantilla y burbujas interactivas */
.wa .wa-pie {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 10px;
}
.wa .wa-pie .template-footer { margin-right: auto; }
.wa .wa-pie .meta { float: none; margin: 0; }
.wa .tpl .wa-pie { padding: 0 10px 8px; }
.wa .bubble .wa-pie { margin-top: 3px; }

/* ---------- 15. Quick replies / botones apilados (research-ui §6.1) ---------- */
.wa .qr-btns {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--wa-bubble-in);
  border-radius: 14px;
  overflow: hidden;
  transition: background-color .2s ease;
}
.wa .qr-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  text-align: center;
  font-size: 17px;                    /* .btn-label */
  color: var(--wa-accent);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}
.wa .qr-btn + .qr-btn { border-top: 1px solid var(--wa-separator); }
.wa .qr-btn:active { background: rgba(0, 0, 0, .05); }
.wa .tpl-btns { border-radius: 0; border-top: 1px solid var(--wa-separator); }
/* Header (texto/doc) del tipo buttons dentro de la burbuja: sin el padding
   de plantilla (research-api §6.1) */
.wa .bubble .tpl-header-txt { padding: 0 0 3px; }
.wa .bubble .tpl-header-doc { padding: 0 0 3px; border-bottom: 0; }

/* ---------- 16. CTA URL (research-ui §6.2) ---------- */
.wa .cta-card {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--wa-bubble-in);
  transition: background-color .2s ease;
}
.wa .cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 12px 8px;
  color: var(--wa-ios-blue);          /* "un botón azul que abre el navegador" (research-api §6.3) */
  font-size: 17px;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}
.wa .cta-btn:active { background: rgba(0, 0, 0, .05); }
.wa .cta-btn-inactiva { color: var(--wa-text-meta); cursor: default; }  /* cta_url sin url */
.wa .cta-domain {
  border-top: 1px solid var(--wa-separator);
  padding: 5px 8px 7px;
  font-size: 12px;
  color: var(--wa-text-meta);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 17. Carousel (research-ui §6.5): scroll-snap + puntos ---------- */
.wa .carousel {
  display: flex;
  gap: 8px;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px 2px 4px;
  scrollbar-width: none;
}
.wa .carousel::-webkit-scrollbar { display: none; }
.wa .card {
  flex: 0 0 78%;                      /* research-ui §6.5: "Tarjeta ~78% del ancho" */
  scroll-snap-align: center;
  border-radius: 14px;
  overflow: hidden;
  background: var(--wa-bubble-in);
  display: flex;
  flex-direction: column;
  transition: background-color .2s ease;
}
.wa .card-media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--wa-separator);
}
.wa .card-body { padding: 8px 10px 6px; font-size: 15px; line-height: 1.3; white-space: pre-wrap; }
.wa .card-btns { margin-top: auto; }
.wa .card-btns .qr-btn { border-top: 1px solid var(--wa-separator); }
.wa .car-puntos {
  display: flex;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 2px 0 0;
}
.wa .car-punto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wa-text-meta);
  opacity: .35;
  transition: opacity .2s ease;
}
.wa .car-punto.activo { opacity: .9; }

/* ---------- 18. Indicador "escribiendo…" ---------- */
.wa .wa-bubble-escribiendo {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 13px 10px;
}
.wa .wam-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wa-text-meta);
  animation: wam-parpadeo 1.15s ease-in-out infinite;
}
.wa .wam-dot:nth-child(2) { animation-delay: .15s; }
.wa .wam-dot:nth-child(3) { animation-delay: .3s; }

/* ---------- 19. Sheet de lista (modal iOS en #pantalla) ---------- */
.wa .sheet { position: absolute; inset: 0; z-index: 60; display: flex; align-items: flex-end; }
.wa .sheet-fondo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  animation: wam-fundo .22s ease;
}
.wa .sheet-panel {
  position: relative;
  width: 100%;
  max-height: 74%;
  display: flex;
  flex-direction: column;
  border-radius: 14px 14px 0 0;
  background: var(--wa-bg-chat);
  color: var(--wa-text);
  padding-bottom: 26px;
  animation: wam-subir .28s cubic-bezier(.2, .8, .3, 1);
}
.wa .sheet-cabecera { padding: 14px 16px 8px; }
.wa .sheet-titulo { font-size: 16px; font-weight: 600; }
.wa .sheet-opciones { overflow-y: auto; padding: 0 12px; }
.wa .sheet-seccion { padding: 12px 6px 6px; font-size: 13px; color: var(--wa-text-meta); }
.wa .sheet-grupo { border-radius: 12px; overflow: hidden; background: var(--wa-sheet); }
.wa .sheet-fila {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 12px;
  cursor: pointer;
  user-select: none;
}
.wa .sheet-fila + .sheet-fila { border-top: 1px solid var(--wa-separator); }
.wa .sheet-fila:active { background: rgba(0, 0, 0, .06); }
.wa .sheet-fila-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wa .sheet-fila-titulo { font-size: 16px; }
.wa .sheet-fila-desc { font-size: 13px; color: var(--wa-text-meta); }
.wa .sheet-fila svg { flex: none; color: var(--wa-text-meta); }
.wa .sheet-vacio { padding: 18px; text-align: center; font-size: 14px; color: var(--wa-text-meta); }

/* ---------- 20. Compose bar (chrome del research-ui §5, campo "Mensaje") ---------- */
.wa #composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 10px;
  background: var(--wa-chrome);
  border-top: 1px solid var(--wa-separator);
  transition: background-color .2s ease;
}
/* Píldora del campo "Mensaje": es .field (input transparente + mic dentro),
   según research-ui §5. Sin ella flex:1 del input no se aplica (padre no flex). */
.wa #composer .field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border-radius: 19px;                /* píldora */
  background: var(--wa-compose-field);
  color: var(--wa-text-meta);
}
.wa #composer .field .mic { flex: none; opacity: .55; }
.wa #composer-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--wa-text);
  font: inherit;
  font-size: 16px;
}
.wa #composer-input::placeholder { color: var(--wa-text-meta); }
.wa #composer-enviar {
  flex: none;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--wa-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ---------- 21. Accesibilidad de foco ---------- */
.wa .qr-btn:focus-visible,
.wa .cta-btn:focus-visible,
.wa .sheet-fila:focus-visible {
  outline: 2px solid var(--wa-accent);
  outline-offset: -2px;
}

/* ---------- 22. Keyframes (prefijo wam-) ---------- */
@keyframes wam-parpadeo {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-1px); }
}
@keyframes wam-fundo {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes wam-subir {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}