/* Un chat familiar de todos los días: papel tapiz de dibujitos, burbujas blancas y verdes. */
:root {
  --fondo: #ece5dc;
  --tapiz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' fill='none' stroke='%23b9ad9c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='.45'%3E%3Cpath d='M12 18h18v11a9 9 0 0 1-18 0z M30 21h4a4 4 0 0 1 0 8h-4 M17 12c0-3 3-3 3-6 M24 12c0-3 3-3 3-6'/%3E%3Ccircle cx='96' cy='24' r='9'/%3E%3Cpath d='M92 33v6h8v-6 M93 42h6'/%3E%3Cpath d='M40 96c-7-7-15-2-10 5l10 10 10-10c5-7-3-12-10-5z'/%3E%3Cellipse cx='104' cy='98' rx='15' ry='8'/%3E%3Cpath d='M92 96c4 2 20 2 24 0'/%3E%3Cpath d='M66 62l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z'/%3E%3C/svg%3E");
  --cabecera: #f6f3ee;
  --burbuja: #ffffff;
  --burbuja-yo: #d6f4c6;
  --texto: #1d2327;
  --suave: #6b7a83;
  --acento: #1f9d58;
  --acento-texto: #ffffff;
  --visto: #3a9be0;
  --aviso: #fff2c2;
  --sombra: 0 1px 1px rgba(0, 0, 0, .12);
  --nombre-mezcla: 62%;
  --titular: 'Lilita One', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --chat: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0f171b;
    --tapiz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' fill='none' stroke='%2333434b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='.6'%3E%3Cpath d='M12 18h18v11a9 9 0 0 1-18 0z M30 21h4a4 4 0 0 1 0 8h-4 M17 12c0-3 3-3 3-6 M24 12c0-3 3-3 3-6'/%3E%3Ccircle cx='96' cy='24' r='9'/%3E%3Cpath d='M92 33v6h8v-6 M93 42h6'/%3E%3Cpath d='M40 96c-7-7-15-2-10 5l10 10 10-10c5-7-3-12-10-5z'/%3E%3Cellipse cx='104' cy='98' rx='15' ry='8'/%3E%3Cpath d='M92 96c4 2 20 2 24 0'/%3E%3Cpath d='M66 62l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z'/%3E%3C/svg%3E");
    --cabecera: #1a2329;
    --burbuja: #1f2c33;
    --burbuja-yo: #12503f;
    --texto: #e7ebed;
    --suave: #8c9ba3;
    --acento: #2bb673;
    --acento-texto: #08130d;
    --visto: #53b1f0;
    --aviso: #3a3420;
    --sombra: none;
    --nombre-mezcla: 100%;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--cabecera);
  color: var(--texto);
  font: 16px/1.4 var(--chat);
  -webkit-tap-highlight-color: transparent;
}
button, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
[hidden] { display: none !important; }

/* El teléfono: en celular ocupa todo; en escritorio queda centrado. */
.telefono {
  position: relative;
  max-width: 430px;
  height: 100dvh;
  margin: 0 auto;
  background: var(--fondo) var(--tapiz);
  overflow: hidden;
}
.telefono > section { height: 100%; }

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--burbuja-yo);
  font-size: 1.3rem;
}
.avatar-grande { width: 84px; height: 84px; font-size: 2.6rem; }

/* Botón principal. */
#entrar, #estado-ok, #compartir, #reintentar {
  display: block;
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--acento);
  color: var(--acento-texto);
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
}
#estado-ok:disabled { opacity: .4; cursor: not-allowed; }

/* Portada, estado, cierre, error: una tarjeta de invitación sobre el papel tapiz. */
#portada, #estado, #cierre, #error {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 14px calc(20px + env(safe-area-inset-bottom));
}
.invitacion {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 20px 20px;
  border-radius: 20px;
  background: var(--burbuja);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
#portada .invitacion { align-items: center; text-align: center; }
.marca { font-weight: 700; font-size: 1.15rem; }
.sub { color: var(--suave); font-size: .9rem; }
#cap-numero { margin-top: 10px; color: var(--acento); font-weight: 700; }
#cap-titulo { font: clamp(2.3rem, 11vw, 3.1rem)/1.02 var(--titular); }
#cap-previo { color: var(--suave); max-width: 34ch; }
#cap-previo:empty { display: none; }
.invitacion > button { margin-top: 10px; }

#estado h2, #cierre h2, #error h2 { font: 1.8rem/1.1 var(--titular); }
#estado p, #error p { color: var(--suave); }
#estado label { font-weight: 600; margin-top: 6px; }
#estado-select {
  width: 100%;
  padding: 13px;
  border: 1px solid rgba(127, 127, 127, .35);
  border-radius: 12px;
  background: var(--burbuja);
  font-size: 1.05rem;
}
#perfil-titulo { font-size: clamp(2.1rem, 10vw, 2.7rem); color: var(--acento); }
#perfil-lineas p { font-size: 1.1rem; }

/* El juego: cabecera, chat que hace scroll, zona de respuestas. */
#juego { display: flex; flex-direction: column; }
.cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--cabecera);
  box-shadow: 0 1px 0 rgba(127, 127, 127, .2);
}
.cabecera { width: 100%; border: 0; text-align: left; cursor: pointer; }
.cabecera-texto { display: flex; flex-direction: column; min-width: 0; }
.cabecera strong { font-size: 1.02rem; }
.cabecera small { color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#chat {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 10px 18px;
}

.msg {
  position: relative;
  align-self: flex-start;
  max-width: 82%;
  padding: 6px 9px 18px 10px;
  border-radius: 4px 12px 12px 12px;
  background: var(--burbuja);
  box-shadow: var(--sombra);
  animation: entra .2s ease-out;
}
.autor {
  display: block;
  color: color-mix(in srgb, var(--color, var(--suave)) var(--nombre-mezcla), #000);
  font-weight: 700;
  font-size: .84rem;
  margin-bottom: 1px;
}
.etiqueta { display: block; color: var(--suave); font-size: .78rem; font-style: italic; margin-bottom: 2px; }
.texto { white-space: pre-line; overflow-wrap: anywhere; padding-right: 54px; }
.msg-reenviado .texto { color: color-mix(in srgb, var(--texto) 80%, var(--suave)); }
.hora {
  position: absolute;
  right: 8px;
  bottom: 4px;
  color: var(--suave);
  font-size: .68rem;
  white-space: nowrap;
}
.msg-yo {
  align-self: flex-end;
  border-radius: 12px 4px 12px 12px;
  background: var(--burbuja-yo);
}
.msg-yo .hora::after { content: ' ✓✓'; color: var(--visto); letter-spacing: -2px; }

.escribiendo {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--burbuja) 80%, transparent);
  color: var(--suave);
  font-size: .8rem;
  font-style: italic;
  animation: titila 1.2s ease-in-out infinite;
}

/* Info del grupo: hoja que sube desde abajo con los participantes. */
#grupo {
  width: min(430px, 100%);
  max-width: 100%;
  max-height: 88dvh;
  margin: auto auto 0;
  padding: 0 0 calc(12px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 20px 20px 0 0;
  background: var(--cabecera);
  color: var(--texto);
}
#grupo[open] { animation: sube .25s ease-out; }
#grupo::backdrop { background: rgba(0, 0, 0, .45); }
.grupo-cabeza { display: grid; justify-items: center; gap: 4px; padding: 22px 20px 14px; text-align: center; background: var(--burbuja); }
.grupo-cabeza h2 { font-size: 1.25rem; }
#grupo-titulo:focus { outline: none; }
.grupo-descripcion { margin-top: 8px; font-size: .9rem; }
#miembros { list-style: none; padding: 6px 0; margin: 8px 0 0; background: var(--burbuja); }
.miembro { display: flex; align-items: center; gap: 12px; padding: 9px 16px; }
.miembro-texto { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.miembro-texto strong { color: color-mix(in srgb, var(--color, var(--texto)) var(--nombre-mezcla), #000); }
.miembro:first-child .miembro-texto strong { color: var(--texto); }
.miembro-texto small { color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.miembro-lugar { color: var(--suave); font-size: .75rem; text-align: right; max-width: 30%; }
.cerrar {
  display: block;
  width: calc(100% - 32px);
  margin: 12px 16px 0;
  padding: 12px;
  border: 0;
  border-radius: 999px;
  background: var(--burbuja);
  color: var(--acento);
  font-weight: 700;
  cursor: pointer;
}

/* Reacciones: la pastilla de emojis que cuelga de la burbuja. */
.msg.con-reacciones { margin-bottom: 14px; }
.reacciones {
  position: absolute;
  left: 10px;
  bottom: -14px;
  display: flex;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--burbuja);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
  font-size: .8rem;
  white-space: nowrap;
  animation: brota .25s ease-out;
}
.msg-yo .reacciones { left: auto; right: 10px; }

/* Puros emojis y stickers: sin burbuja, en grande. */
.msg-jumbo, .msg-sticker { background: none; box-shadow: none; padding-bottom: 20px; }
.msg-jumbo .texto { font-size: 2.6rem; line-height: 1.15; padding-right: 0; }
.msg-jumbo .hora, .msg-sticker .hora {
  padding: 1px 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--burbuja) 85%, transparent);
}
.sticker {
  display: grid;
  justify-items: center;
  width: 150px;
  transform: rotate(-4deg);
}
.sticker-emoji { font-size: 4.6rem; line-height: 1; filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 3px 4px rgba(0, 0, 0, .25)); }
.sticker-texto {
  margin-top: -6px;
  padding: 3px 10px;
  border-radius: 10px;
  background: #fff;
  color: #c2185b;
  font: 1.05rem/1.1 var(--titular);
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
}

/* Nota de voz: play, onda y duración; la transcripción va debajo. */
.audio { display: flex; align-items: center; gap: 10px; min-width: 210px; padding: 4px 0; }
.play {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--acento);
  color: var(--acento-texto);
  font-size: .9rem;
  cursor: pointer;
}
.onda {
  position: relative;
  flex: 1;
  height: 22px;
  background: repeating-linear-gradient(90deg, var(--suave) 0 2px, transparent 2px 5px);
  clip-path: polygon(0 40%, 8% 20%, 16% 55%, 24% 10%, 32% 45%, 40% 25%, 48% 0, 56% 35%, 64% 15%, 72% 50%, 80% 20%, 88% 40%, 100% 30%, 100% 70%, 88% 60%, 80% 80%, 72% 50%, 64% 85%, 56% 65%, 48% 100%, 40% 75%, 32% 55%, 24% 90%, 16% 45%, 8% 80%, 0 60%);
  opacity: .6;
}
.onda::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, var(--acento) 0 2px, transparent 2px 5px);
  transform: scaleX(0);
  transform-origin: left;
}
.sonando .onda { opacity: 1; }
.sonando .onda::after { animation: avanza var(--dur, 5s) linear forwards; }
.duracion { color: var(--suave); font-size: .78rem; font-variant-numeric: tabular-nums; }
.transcripcion { margin-top: 2px; font-size: .9rem; font-style: italic; color: color-mix(in srgb, var(--texto) 85%, var(--suave)); }

/* Foto: la imagen real o un marcador ilustrado mientras no exista. */
.foto {
  display: block;
  width: 240px;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  margin: 2px 0 6px;
  border-radius: 8px;
  object-fit: cover;
}
.foto-marcador {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .5), transparent 60%),
    linear-gradient(135deg, #f5c98a, #e9906f 55%, #b9708e);
  font-size: 2.4rem;
}

/* Avisos del sistema: TV/radio, escenas y la encuesta del pueblo. */
.especial { align-self: center; max-width: 90%; text-align: center; animation: entra .2s ease-out; }
.especial.tv {
  padding: 7px 12px;
  border-radius: 10px;
  background: var(--aviso);
  box-shadow: var(--sombra);
  font-size: .88rem;
}
.especial.escena {
  padding: 5px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--cabecera) 85%, transparent);
  color: var(--suave);
  font-size: .85rem;
  font-style: italic;
}
.especial.dilema {
  align-self: stretch;
  max-width: none;
  margin-top: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--burbuja);
  box-shadow: var(--sombra);
  border-top: 4px solid var(--acento);
  font: 1.25rem/1.2 var(--titular);
}
.especial.dilema::before { content: 'Encuesta · el pueblo decide'; display: block; margin-bottom: 6px; color: var(--acento); font: 700 .8rem var(--chat); }

#respuestas { display: flex; flex-direction: column; gap: 7px; }
#respuestas:not(:empty) { padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); background: var(--cabecera); }
.opcion {
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--acento) 55%, transparent);
  border-radius: 999px;
  background: var(--burbuja);
  color: var(--texto);
  text-align: left;
  cursor: pointer;
}
.opcion:active { background: var(--burbuja-yo); }

/* Swipe: capa a pantalla completa sobre el chat. */
#swipe {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 18px calc(22px + env(safe-area-inset-bottom));
  background: var(--fondo) var(--tapiz);
}
#swipe-titulo { font: 1.6rem/1.1 var(--titular); text-align: center; }
#swipe-contador { color: var(--suave); }
#swipe-pila { flex: 1; width: 100%; display: grid; place-items: center; }
.tarjeta {
  width: 100%;
  min-height: 46%;
  display: grid;
  place-items: center;
  padding: 26px 22px;
  border-radius: 22px;
  background: var(--burbuja);
  border: 3px solid transparent;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
  font-size: 1.3rem;
  font-weight: 600;
  text-align: center;
  touch-action: none;
  user-select: none;
  cursor: grab;
  transition: transform .2s ease-out, border-color .15s;
}
.tarjeta.arrastrando { transition: none; cursor: grabbing; }
.tarjeta[data-lado="si"] { border-color: var(--acento); }
.tarjeta[data-lado="no"] { border-color: #d9534f; }
.swipe-botones { display: flex; gap: 12px; width: 100%; }
.swipe-botones button {
  flex: 1;
  padding: 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
}
#swipe-no { background: var(--burbuja); border: 2px solid #d9534f; }
#swipe-si { background: var(--acento); border: 2px solid var(--acento); color: var(--acento-texto); }

@keyframes entra { from { opacity: 0; transform: translateY(6px); } }
@keyframes titila { 50% { opacity: .45; } }
@keyframes sube { from { transform: translateY(40px); opacity: 0; } }
@keyframes brota { from { opacity: 0; transform: scale(.4); } }
@keyframes avanza { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}