.pedir-chat { display: flex; gap: 10px; }
.pedir-chat .accion-icono { flex: none; width: 58px; padding: 0; }

.como-se-canjea {
  position: relative; overflow: hidden; display: grid; gap: 12px; padding: 22px 20px 22px; border-radius: 30px;
  background: var(--noche); color: #fff; --clave: var(--lima); --raya: var(--lima);
}
.como-se-canjea > :not(.masas) { position: relative; z-index: 1; }
.como-se-canjea p { margin: 0; font-size: 16.5px; opacity: .9; }
.pastilla-foto { position: absolute; z-index: 5; left: -4px; top: 14px; rotate: -7deg; }

.codigo { display: flex; gap: 10px; margin: 4px 0 6px; font-size: 40px; font-weight: 850; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.codigo span { padding: 2px 6px 4px 14px; border-radius: 16px; background: rgb(255 255 255 / .16); }
.chat {
  display: flex; flex-direction: column; min-height: 100dvh;
  background: #e8e6e1; color: #1f1d24; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 400;
}
.chat-barra {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 14px 10px 8px; background: #f6f5f2; border-bottom: 1px solid #d9d6cf;
}
.chat-barra .volver { margin-left: 0; }
.chat-barra img { width: 38px; height: 38px; border-radius: 50%; }
.chat-barra b { display: block; font-size: 16px; font-weight: 600; }
.chat-barra small { font-size: 12.5px; color: #6b6872; }

.chat-hilo { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 14px 12px 96px; }
.chat-dia { align-self: center; margin: 2px 0 8px; padding: 3px 10px; border-radius: 8px; background: #fff; font-size: 12.5px; color: #6b6872; }

.globo {
  align-self: flex-start; max-width: 82%; margin: 0; padding: 7px 10px 6px; border-radius: 4px 14px 14px 14px;
  background: #fff; font-size: 15.5px; line-height: 1.35; box-shadow: 0 1px 1px rgb(0 0 0 / .08);
}
.globo time { float: right; margin: 7px 0 -3px 10px; font-size: 11.5px; color: #8b8890; }
.globo-mio { align-self: flex-end; border-radius: 14px 4px 14px 14px; background: #d9ecd6; }
.globo[data-pop] { animation: globo 300ms var(--entrar) both; }
@keyframes globo { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.globo-link { display: grid; gap: 6px; width: 82%; padding: 4px 4px 6px; text-align: left; animation: tocar 1.9s ease-in-out infinite; }
.chat[data-usado] .globo-link { animation: none; }
@keyframes tocar { 50% { box-shadow: 0 0 0 5px rgb(104 87 255 / .28); } }
.globo-vista { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; background: #f1f0ec; }
.globo-vista img { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.globo-vista b { display: block; font-size: 15px; font-weight: 600; }
.globo-vista small { font-size: 13px; color: #6b6872; }
.globo-url { padding: 0 6px; font-size: 14px; color: #2b62c9; text-decoration: underline; }
.globo-link time { padding-right: 6px; }

.globo-escribe { display: flex; gap: 4px; padding: 12px 14px; }
.globo-escribe i { width: 7px; height: 7px; border-radius: 50%; background: #9a97a0; animation: escribe 1s ease-in-out infinite; }
.globo-escribe i:nth-child(2) { animation-delay: .15s; }
.globo-escribe i:nth-child(3) { animation-delay: .3s; }
@keyframes escribe { 50% { transform: translateY(-4px); opacity: .5; } }

.chat-escribir { position: fixed; z-index: 2; left: 0; right: 0; bottom: 0; padding: 10px 12px max(12px, env(safe-area-inset-bottom)); background: #f6f5f2; }
.chat-escribir span { display: block; padding: 11px 16px; border-radius: 22px; background: #fff; color: #8b8890; }
.aviso-push {
  position: fixed; z-index: 40; left: 50%; top: max(10px, env(safe-area-inset-top)); translate: -50% 0; width: min(calc(100% - 24px), 380px);
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; text-align: left;
  background: rgb(250 250 248 / .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--elevar);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14.5px; line-height: 1.3; color: #1f1d24;
  animation: aviso 480ms var(--rebote) both;
}
.aviso-push[hidden] { display: none; }
.aviso-push img { width: 38px; height: 38px; flex: none; border-radius: 10px; }
.aviso-push b { display: block; font-weight: 650; }
@keyframes aviso { from { opacity: 0; transform: translateY(-70px); } }
.globo-texto { padding: 6px 6px 2px; font-size: 15.5px; line-height: 1.35; }
.globo-texto b { font-weight: 650; }
.chat-sin-leer { align-self: center; margin: 6px 0; padding: 4px 12px; border-radius: 8px; background: #fff8d9; color: #6d5400; font-size: 13px; }
.ventana { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px; background: rgb(201 255 74 / .16); color: var(--lima); font-weight: 650; opacity: 1; }
.ventana svg { width: 16px; height: 16px; }
.esperando { display: flex; align-items: center; gap: 12px; max-width: 320px; padding: 12px 16px; border-radius: 18px; background: rgb(255 255 255 / .14); font-size: 15.5px; font-weight: 600; text-align: left; }
.esperando span { display: flex; gap: 4px; flex: none; }
.esperando i { width: 8px; height: 8px; border-radius: 50%; background: var(--lima); animation: escribe 1s ease-in-out infinite; }
.esperando i:nth-child(2) { animation-delay: .15s; }
.esperando i:nth-child(3) { animation-delay: .3s; }