/*
  Registro conversacional (index.html).

  Sustituye a css/registro.css + css/chatbot.css: ya no hay formulario, hay un
  chat. Se carga DESPUÉS de css/index.css y reutiliza su reset de kiosk y la
  fuente Rubik.

  Paleta: NARANJA + BLANCO.
  La ventana del chat es blanca y limpia (es donde se lee y se escribe), y el
  naranja de marca hace de acento: encabezado, burbujas del visitante, botones
  y foco. El azul corporativo sólo sobrevive como color de texto, para que el
  contraste sobre blanco sea cómodo de leer desde lejos.

  El fondo animado de mina (css/mine-bg.css) sigue detrás: la ventana se apoya
  encima como una hoja de papel.
*/

:root {
  /* Acentos de marca. */
  --chat-naranja: #FF6B00;
  --chat-naranja-oscuro: #CC5500;
  --chat-naranja-suave: #FFF1E5;   /* Relleno de los botones de respuesta. */
  --chat-naranja-borde: #FFD2AE;

  /*
    Botón de registro: contorno naranja, sin relleno. Es un naranja propio y
    algo más claro que el de marca porque tiene que leerse como una línea fina
    sobre la roca oscura, no como una placa.
  */
  --chat-registrar-naranja: #FF7A00;

  /* Superficies. */
  --chat-blanco: #FFFFFF;
  --chat-lienzo: #FFF9F4;          /* Hilo de mensajes: blanco apenas cálido. */
  --chat-burbuja-bot: #FFFFFF;
  --chat-linea: #F0E2D6;

  /* Texto. */
  --chat-tinta: #2B2018;
  --chat-tinta-suave: #7A6659;

  /*
    Alto del disco de cada red (ver .redes__link). Vive aquí arriba porque el
    pie va anclado al borde inferior y hay que reservarle su franja: es lo que
    impide que la ventana del chat le pase por encima.
  */
  --redes-alto: 62px;

  /* Alto de la ventana: se come la pantalla salvo el aire y el pie de redes. */
  --chat-alto: min(880px, calc(100dvh - 7vmin - var(--redes-alto)));

  /*
    Vitrina de juegos: barra lateral pegada al borde IZQUIERDO. Cambió de lado
    porque la derecha es ahora de Ceneritto —el sitio donde todo el mundo
    espera encontrar un chat—, y las dos cosas no caben en el mismo borde.

    `--centro-max` es lo que le queda a la columna del chat sin llegar a pisar
    la vitrina: la pantalla menos la barra, menos el aire de los tres bordes
    que hay entre medio (el de la barra, el del chat y el hueco central).
  */
  --juegos-ancho: 210px;

  /*
    Franja reservada del borde DERECHO. Ahí no hay nada: hubo un ranking (se
    quitó a pedido), pero la franja se mantiene, del MISMO ancho que la
    vitrina, para que Ceneritto quede centrado en la pantalla de verdad. Si se
    pusiera en 0, el chat se centraría en el hueco entre la vitrina y el borde
    derecho, y se vería corrido a la derecha aunque los números dijeran que
    está centrado.
  */
  --margen-derecho: 210px;

  /*
    Lo que le queda a la columna del chat: la pantalla menos la vitrina, menos
    la franja derecha, menos el aire de los bordes que hay entre medio.
  */
  --centro-max: calc(100vw - var(--juegos-ancho) - var(--margen-derecho) - 12vmin);
}

/*
  index.css fija `position: fixed` en el body para matar el rebote elástico de
  iOS. Aquí el que se desplaza es el hilo de mensajes, nunca la página: con el
  teclado táctil abierto, dejar que la página entera se mueva sacaba el
  compositor de la pantalla.
*/
.body--chat {
  overflow: hidden;
}

.chat {
  position: relative;   /* Por encima del fondo animado de mina. */
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  /*
    Todo lo de Ceneritto —el globo, el botón y la ventana del chat— va
    CENTRADO en el hueco que deja la vitrina de juegos. En un tótem no hay
    ratón ni "esquina de siempre" para el chat: quien pasa por delante mira al
    medio de la pantalla, y ahí tiene que estar la conversación. El centrado
    es del hueco y no de la pantalla entera: el padding izquierdo reserva la
    franja de la vitrina —que va absoluta contra el borde izquierdo— para que
    el chat no acabe pisándola.
  */
  align-items: center;
  justify-content: flex-end;
  gap: 1.6vmin;
  /*
    El pie de redes está fuera del flujo (va anclado abajo), así que su franja
    se reserva con padding: es lo que mantiene centrado lo de en medio sin que
    quede pisando los iconos.
  */
  padding: 2.5vmin 3vmin calc(2.5vmin + var(--redes-alto));
  /*
    Franja reservada a cada lado: la vitrina va absoluta contra el borde
    izquierdo y sin este padding el chat acabaría por debajo de ella; la
    derecha es una franja vacía del mismo ancho (ver --margen-derecho). Iguales
    entre sí, que es lo que deja a Ceneritto en el eje real de la pantalla.
  */
  padding-left: calc(3vmin + var(--juegos-ancho));
  padding-right: calc(3vmin + var(--margen-derecho));
}

/* ---------------------------------------------------------- bienvenida */

.chat__bienvenida[hidden] {
  display: none;
}

/*
  Columna de Ceneritto con el chat cerrado: el globo arriba y él debajo,
  los dos alineados al borde derecho —el globo cuelga hacia la izquierda,
  porque hacia la derecha no hay pantalla—. El ancho se topa en `--centro-max`
  para no meterse debajo de la vitrina de juegos.
*/
.chat__bienvenida {
  /*
    Centrado en el eje horizontal de la pantalla: el botón y Ceneritto son la
    llamada principal del tótem y en el medio los ve todo el mundo, venga de
    donde venga. Sigue anclado abajo —lo pone el `justify-content: flex-end`
    de .chat— y por encima del pie de redes, que tiene su franja reservada en
    el padding inferior. `align-self` lo centra sea cual sea el ancho.
  */
  max-width: min(var(--centro-max), 520px);
  align-self: center;
  /*
    Y en el centro también a lo alto: los márgenes automáticos se comen el
    hueco que queda arriba y abajo por igual, así que el bloque cae en mitad
    de la pantalla en vez de pegado al pie. Ganan al `justify-content` de
    .chat, que sigue mandando cuando lo que se muestra es la ventana del chat.

    El desplazamiento corrige el único reparto que no es simétrico: abajo hay
    reservada la franja del pie de redes y arriba no, así que sin él el centro
    del flujo queda medio pie más alto que el centro real de la pantalla.
  */
  margin-block: auto;
  transform: translateY(calc(var(--redes-alto) / 2));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;

  /*
    El globo va posicionado en absoluto sobre este bloque —a la altura del
    brazo de la mascota, no en flujo por encima de ella—: por eso el
    contenedor manda como referencia.
  */
  position: relative;
}

/* -------------------------------------------------------------- globo */

/*
  Lo único que dice Ceneritto con el chat cerrado. Va A LA IZQUIERDA del bicho,
  a la altura del brazo levantado —como si el saludo saliera de la mano—, y
  va cambiando de mensaje solo (ver `rotarGlobo` en js/chat-registro.js):
  saluda, cuenta qué es Ceneris, y vuelve a empezar.

  El fondo es semitransparente sobre la mina: nada de blanco opaco. El texto
  va en blanco con sombra suave para que se lea contra la foto sin necesidad
  de un panel sólido detrás.
*/
.chat__globo[hidden] {
  display: none;
}

.chat__globo {
  position: absolute;
  /*
    Anclado al centro horizontal de la bienvenida (donde va la mascota) y
    corrido hacia la izquierda: el borde derecho del globo cae justo antes de
    la mano que saluda. La altura queda en el tercio superior del bloque, a la
    altura del brazo, en vez de encima de la cabeza.
  */
  right: calc(50% + 60px);
  /*
    Un pelo arriba del brazo levantado de la mascota: el globo queda cerca de
    la mano sin taparla, y el saludo animado se ve entero. La punta apunta
    hacia abajo, sobre el brazo.
  */
  bottom: calc(50% + 110px);
  width: min(36vw, 360px);
  max-width: 360px;
  padding: 14px 18px;
  /*
    Esquina inferior derecha sin redondear: de ahí nace el pico, y un radio
    ahí dejaría un escalón entre la caja y la cola.
  */
  border-radius: 18px 18px 0 18px;

  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  color: var(--chat-blanco);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  /*
    Sólo la sombra de apoyo. El aro de 1px que llevaba antes dibujaba una
    línea sobre la base del pico y lo partía en dos piezas; sin él, cola y
    caja se leen como una sola figura.
  */
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);

  text-align: center;
  z-index: 2;

  /* Cada mensaje entra desde abajo, como si subiera desde la mano. */
  animation: globo-entra 320ms cubic-bezier(.2, .8, .2, 1) both;
}

/*
  El pico del bocadillo, como en un globo de cómic: un triángulo sólido que
  nace del borde inferior derecho y baja apuntando a la mascota.

  Va pegado al borde (`top: 100%`, sin solaparse) y con el MISMO fondo y el
  mismo desenfoque que la caja: al no montarse encima, el alfa no se suma y
  la unión no deja ni costura ni degradado.
*/
.chat__globo::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 0;
  width: 32px;
  height: 24px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  /* Base arriba, contra el globo; vértice abajo a la derecha. */
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/*
  Colgado al costado, el globo necesita medio ancho de pantalla menos la
  vitrina de juegos. Por debajo de ~1140px eso deja una tira demasiado
  angosta —y termina metiéndose debajo de la vitrina—, así que vuelve al
  flujo, encima de la mascota, con el pico apuntándole desde abajo.
*/
@media (max-width: 1140px) {
  .chat__globo {
    position: static;
    width: auto;
    max-width: min(100%, 420px);
  }

  .chat__globo::after { right: 32px; }
}

.chat__globo-texto {
  margin: 0;
  font-size: clamp(14px, 1.9vmin, 17px);
  font-weight: 600;
  line-height: 1.35;
  /*
    Los mensajes van de un renglón a cinco. Reservando dos de mínimo, los
    cortos no encogen el globo a una tira, y el centrado reparte el sobrante
    arriba y abajo en vez de dejar el texto colgando del borde superior.
  */
  min-height: 2.7em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
  Salida: el mensaje se va antes de que llegue el siguiente. La duración tiene
  que coincidir con CHATBOT.msGloboSalida (js/config.js), que es la espera que
  el bucle deja entre uno y otro.
*/
.chat__globo--saliendo {
  animation: globo-sale 380ms ease both;
}

@keyframes globo-entra {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

@keyframes globo-sale {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-8px) scale(0.97); }
}

@media (prefers-reduced-motion: reduce) {
  .chat__globo,
  .chat__globo--saliendo { animation: none; }
}

/* ------------------------------------------------------------ lanzador */

/*
  Lo único que se ve antes de abrir el chat: Ceneritto con su nombre debajo
  y el botón de registro pegado al lado, en vez de la ventana completa de
  golpe. Toda la superficie es tocable, no sólo el botón.
*/
.chat__lanzador[hidden] {
  display: none;
}

.chat__lanzador {
  /*
    Del ancho de lo que lleva adentro —foto y botón, nada más—: el envoltorio
    la centra, así que estirarla sólo dejaría aire vacío en medio.

    Una sola columna, tres filas: Ceneritto en vídeo arriba, su nombre
    debajo como pie, y el botón de registro al final. Antes iban en dos
    columnas —cara y botón codo con codo—, pero el vídeo de cuerpo entero es
    demasiado alto para eso: al lado del botón lo empequeñecía. Apilado, el
    bicho ocupa todo lo que quiera y el botón sigue siendo lo último que se
    lee antes de tocar.
  */
  max-width: 100%;
  display: grid;
  grid-template-columns: auto;
  justify-items: center;
  justify-content: center;
  align-items: center;
  row-gap: 7px;

  /*
    Sin placa ni cristal detrás: sobre el fondo de mina quedan sueltos sólo
    Ceneritto y su botón. Lo que antes daba cuerpo al conjunto —el borde, el
    desenfoque y la sombra de la píldora— ya no está, así que la foto y el
    nombre se apoyan en sombra propia para no perderse contra la roca.
  */
  cursor: pointer;
  font-family: inherit;

  /*
    Entra una vez al aparecer: Ceneritto "llega". El latido invitando a tocar
    empieza recién cuando el botón ya está puesto —latir antes sería invitar a
    tocar algo que todavía no se ve—.
  */
  animation: lanzador-entra 420ms cubic-bezier(.2, .8, .2, 1) both;
}

/*
  Ya no hay píldora a la que hacerle aura, así que el latido que invita a
  tocar pasa al único elemento que se lee como tocable: el botón.
*/
.chat__lanzador--listo .chat__registrar {
  animation:
    registrar-entra 260ms ease both,
    registrar-pulso 2.4s ease-in-out 260ms infinite;
}

@keyframes lanzador-entra {
  from { opacity: 0; transform: translateY(16px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

.chat__lanzador:active {
  transform: scale(0.97);
}

/*
  Primera fila: Ceneritto de cuerpo entero, en vídeo, encima de todo lo
  demás. Es lo único que representa a Ceneritto fuera del chat, así que se le
  da mucho más sitio que al medallón de la cabecera, donde sólo acompaña a un
  nombre escrito.
*/
.chat__avatar--lanzador {
  grid-row: 1;

  /*
    Cuadrado: el vídeo viene 960x960. `vmin` para que encoja con la pantalla
    más corta y nunca se coma el botón en un móvil tumbado.
  */
  width: clamp(150px, 26vmin, 260px);
  height: clamp(150px, 26vmin, 260px);
  display: block;

  /*
    El vídeo es WebM VP9 con canal alfa: viene recortado de fábrica, así que
    no hace falta ni filtro ni mezcla para quitarle el fondo. Antes era un MP4
    sobre negro y había que fabricarle el alfa a mano con un filtro SVG por
    luminancia; con alfa de verdad el borde sale limpio y sin umbrales que
    afinar.
  */

  /* La sombra iría al cuadrado entero, no a la silueta: no pega ninguna. */
  pointer-events: none;
}

/* Segunda fila, bajo el vídeo: es su pie, no un titular. */
.chat__lanzador-nombre {
  grid-row: 2;
  font-size: clamp(13px, 1.7vmin, 16px);
  font-weight: 800;
  color: var(--chat-blanco);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  /* Va directo sobre la foto del fondo: la sombra lo mantiene legible. */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* Un latido suave invita a tocar sin ser tan intenso que distraiga. */
@keyframes registrar-pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 122, 0, 0.35); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 122, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .chat__lanzador,
  .chat__lanzador--listo .chat__registrar { animation: none; }
}

/* ---------------------------------------------------- botón registrar */

/*
  La zona de Ceneritto ya es tocable entera, pero no se LEE como un botón.
  Este sí: pleno de color y justo debajo de Ceneritto, para que quien pasa delante
  del tótem sepa de un vistazo qué tiene que tocar.
*/
.chat__registrar[hidden] {
  display: none;
}

.chat__registrar {
  /*
    Tercera fila: debajo de Ceneritto y de su nombre. Es lo último de la
    columna porque es lo último que se hace —primero se ve quién habla, luego
    se toca—.
  */
  grid-row: 3;
  margin-top: 6px;
  /*
    Los costados ceden en pantalla angosta antes que desbordar. El relleno
    baja dos píxeles respecto del anterior porque ahora hay borde: entre
    borde y padding el botón mide lo mismo que medía macizo.
  */
  padding: 14px clamp(22px, 5vmin, 44px);
  min-width: 0;
  /*
    Contorno naranja sobre el fondo de mina, sin relleno: pesa menos que una
    placa maciza y deja ver la roca detrás. Se apoya sólo en el color, así que
    no lleva sombra —la azul de antes ya no existe—.
  */
  border: 2px solid var(--chat-registrar-naranja);
  border-radius: 999px;
  background-color: transparent;
  color: var(--chat-registrar-naranja);
  font: inherit;
  font-size: clamp(16px, 2.3vmin, 19px);
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  animation: registrar-entra 260ms ease both;
  transition: background-color 200ms ease, color 200ms ease, transform 140ms ease;
}

/* Al pasar por encima el naranja apenas tiñe; borde y texto no se mueven. */
.chat__registrar:hover {
  background-color: rgba(255, 122, 0, 0.12);
}

/* Al tocar se llena algo más y el texto pasa a blanco: acuse de recibo. */
.chat__registrar:active {
  transform: scale(0.97);
  background-color: rgba(255, 122, 0, 0.25);
  color: var(--chat-blanco);
}

@keyframes registrar-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .chat__registrar { animation: none; }
}

/* ------------------------------------------------------------- ventana */

.chat__ventana[hidden] {
  display: none;
}

.chat__ventana {
  width: min(var(--centro-max), 620px);
  height: var(--chat-alto);
  /*
    Centrada en los dos ejes: a lo ancho manda el `align-items: center` de
    .chat, y a lo alto estos márgenes automáticos, que reparten por igual el
    aire que sobra (le ganan al `justify-content: flex-end`, que sólo decide
    cuando no hay margen automático que repartir).
  */
  align-self: center;
  margin-block: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;     /* Recorta las esquinas del encabezado y del hilo. */

  /*
    Vidrio esmerilado: el fondo animado de mina se transparenta a través de
    la ventana en vez de taparse con blanco sólido. El blur es lo que hace
    que el texto siga siendo legible encima de un fondo con tanto detalle.
  */
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 28px;
  /*
    Sombra larga y con un punto de naranja: sobre el fondo de mina (oscuro y
    con mucho detalle) una sombra gris neutra no despegaba la ventana.
  */
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 107, 0, 0.18);
}

/* ---------------------------------------------------------- encabezado */

.chat__header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  flex: 0 0 auto;

  /*
    El naranja de la cabecera va translúcido: es la franja más ancha de color
    y, opaca, era la que tapaba el fondo de mina. Con el blur propio detrás,
    el blanco del nombre y el logo se siguen leyendo.
  */
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.55), rgba(204, 85, 0, 0.55));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--chat-blanco);
  /* La sombra despega el texto blanco del detalle del fondo. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/*
  El avatar de la cabecera es además el botón de minimizar: al tocarlo el chat
  se guarda y vuelve el globo de Ceneritto. No lleva marco propio para no
  parecer un control más; lo que lo delata como tocable es que se hunde al
  pulsarlo.
*/
.chat__salir {
  padding: 0;
  border: none;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  transition: transform 120ms ease, opacity 160ms ease;
}

.chat__salir:active {
  transform: scale(0.92);
  opacity: 0.8;
}

.chat__identidad {
  flex: 1;
  min-width: 0;         /* Deja que el texto se recorte antes que empujar. */
  text-align: left;
}

.chat__nombre {
  font-size: clamp(18px, 2.4vmin, 22px);
  font-weight: 800;
  line-height: 1.2;
}

.chat__rol {
  font-size: clamp(12px, 1.6vmin, 14px);
  font-weight: 400;
  opacity: 0.9;
}

/*
  El logo va directo sobre el naranja (versión transparente, sin la placa
  blanca). Como la bajada del logo es gris oscuro, se aclara con un filtro a
  blanco puro: es la única forma de que se lea sobre el degradado.
*/
.chat__logo {
  height: clamp(26px, 3.4vmin, 34px);
  width: auto;
  flex: 0 0 auto;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

/* --------------------------------------------------------------- avatar */

.chat__avatar {
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--chat-naranja-oscuro);   /* Mientras carga la imagen. */
}

.chat__avatar--header {
  width: clamp(46px, 6vmin, 58px);
  height: clamp(46px, 6vmin, 58px);
  border: 2px solid rgba(255, 255, 255, 0.85);
}

/* El de cada mensaje es chico: identifica al que habla, no protagoniza. */
.chat__avatar--msg {
  width: 34px;
  height: 34px;
  align-self: flex-end;   /* A la altura de la base de la burbuja. */
  border: 2px solid var(--chat-naranja-borde);
}

/* ------------------------------------------------------ hilo de mensajes */

.chat__hilo {
  flex: 1;
  min-height: 0;          /* Sin esto el flex hijo no se desplaza, crece. */
  overflow-y: auto;
  overscroll-behavior: contain;

  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 18px;

  background: transparent;
  scroll-behavior: smooth;
}

/* Barra de desplazamiento discreta: en el tótem se toca, no se arrastra. */
.chat__hilo::-webkit-scrollbar { width: 6px; }
.chat__hilo::-webkit-scrollbar-thumb {
  background: var(--chat-naranja-borde);
  border-radius: 3px;
}

.msg {
  display: flex;
  gap: 10px;
  max-width: 88%;
  font-size: clamp(16px, 2.1vmin, 19px);
  line-height: 1.45;

  /* Entra desde abajo, como llega un mensaje. */
  animation: msg-entra 260ms cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes msg-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.msg--bot {
  align-self: flex-start;
}

.msg__burbuja {
  padding: 12px 16px;
  border-radius: 18px 18px 18px 4px;   /* Esquina viva del lado del avatar. */

  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--chat-tinta);
  box-shadow: 0 2px 6px rgba(43, 32, 24, 0.1);

  /* El resumen manda saltos de línea dentro de un solo mensaje. */
  white-space: pre-wrap;
  /* Un correo largo sin espacios no debe ensanchar la burbuja hasta romperla. */
  overflow-wrap: anywhere;

  /* Ancho mínimo: sin él, el tipeo hace saltar el ancho carácter a carácter. */
  min-width: 64px;
}

/*
  Burbuja del visitante: naranja pleno. Es el color de marca y marca de un
  vistazo qué dijo cada uno, incluso mirando el tótem de lejos.
*/
.msg--usuario {
  align-self: flex-end;
  padding: 12px 16px;
  border-radius: 18px 18px 4px 18px;

  background: linear-gradient(135deg, var(--chat-naranja), var(--chat-naranja-oscuro));
  color: var(--chat-blanco);
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(255, 107, 0, 0.28);
  overflow-wrap: anywhere;
}

/* Cursor parpadeante que sigue al texto durante el tipeo. */
.msg__burbuja--tipeando::after {
  content: '▍';
  margin-left: 1px;
  color: var(--chat-naranja);
  animation: chat-cursor 1s steps(1) infinite;
}

@keyframes chat-cursor {
  50% { opacity: 0; }
}

/* ------------------------------------------------- puntitos "escribiendo" */

.msg__burbuja--pensando {
  padding: 14px 16px;
}

.msg__puntos {
  display: flex;
  gap: 5px;
  align-items: center;
}

.msg__puntos i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chat-naranja);
  opacity: 0.35;
  animation: chat-punto 1.2s ease-in-out infinite;
}

.msg__puntos i:nth-child(2) { animation-delay: 0.15s; }
.msg__puntos i:nth-child(3) { animation-delay: 0.3s; }

@keyframes chat-punto {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-4px); }
}

/* ----------------------------------------------------------- compositor */

.chat__compositor {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));

  background: rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

/*
  Botones de respuesta rápida. Ya no viven debajo, en el compositor: js los
  mete DENTRO del hilo, al final, después del último mensaje del bot. Así las
  respuestas que ofrece Ceneritto se leen en la misma conversación en la que
  pregunta —no en una barra aparte que hay que aprender a mirar— y van del
  lado del visitante, alineadas a la derecha como sus propias burbujas,
  porque son cosas que va a decir él.

  Se envuelven en varias líneas: la línea de interés tiene cinco opciones y en
  el tótem vertical no caben en una sola sin encogerlas hasta que dejan de ser
  tocables.
*/
.chat__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* Dentro del hilo: pegados a la derecha, como las burbujas del visitante. */
  align-self: flex-end;
  justify-content: flex-end;
  max-width: 88%;
  animation: msg-entra 260ms cubic-bezier(.2, .8, .2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .chat__acciones { animation: none; }
}

/* Cuando no hay botones, el hueco no debe dejar aire de más. */
.chat__acciones:empty { display: none; }

.chip {
  min-height: 48px;
  padding: 0 18px;
  border-radius: 24px;
  border: 2px solid var(--chat-naranja-borde);

  /* Translúcido como el resto: el fondo de mina se insinúa también aquí. */
  background: rgba(255, 241, 229, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--chat-naranja-oscuro);
  font-size: clamp(15px, 1.9vmin, 17px);
  font-weight: 600;
  cursor: pointer;
  transition: transform 120ms ease, background 160ms ease, border-color 160ms ease;
}

.chip:active {
  transform: scale(0.96);
  background: var(--chat-naranja-borde);
}

/* Acción principal (confirmar, reintentar): naranja pleno, imposible de no ver. */
.chip--fuerte {
  background: linear-gradient(135deg, var(--chat-naranja), var(--chat-naranja-oscuro));
  border-color: var(--chat-naranja-oscuro);
  color: var(--chat-blanco);
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.35);
}

/*
  Acción secundaria (omitir, corregir): sólo contorno, para no competir. Va en
  blanco y no en tinta: debajo del compositor translúcido está el fondo oscuro
  de la mina, y el marrón suave del texto ahí no se leía.
*/
.chip--suave {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.92);
}

.chip--suave:active {
  background: rgba(255, 255, 255, 0.22);
}

/* -------------------------------------------------------- campo de texto */

.chat__entrada {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat__input {
  flex: 1;
  min-width: 0;
  min-height: var(--touch-target, 72px);
  padding: 0 20px;
  border-radius: 36px;
  border: 2px solid var(--chat-linea);

  background: rgba(255, 255, 255, 0.55);
  color: var(--chat-tinta);
  font-size: clamp(16px, 2.1vmin, 19px);
  /*
    index.css bloquea la selección de texto en todo el tótem (modo kiosk).
    Aquí hay que devolverla: sin ella no se puede corregir lo que uno escribe.
  */
  user-select: text;
  -webkit-user-select: text;
  transition: border-color 160ms ease, background 160ms ease;
}

.chat__input::placeholder {
  color: var(--chat-tinta-suave);
  opacity: 0.75;
}

.chat__input:focus {
  outline: none;
  border-color: var(--chat-naranja);
  background: rgba(255, 255, 255, 0.85);
}

/* Mientras Ceneritto habla el campo se apaga, para que se note el turno. */
.chat__input:disabled {
  opacity: 0.5;
  cursor: default;
}

.chat__enviar {
  flex: 0 0 auto;
  width: var(--touch-target, 72px);
  height: var(--touch-target, 72px);
  border: none;
  border-radius: 50%;

  background: linear-gradient(135deg, var(--chat-naranja), var(--chat-naranja-oscuro));
  box-shadow: 0 6px 18px rgba(255, 107, 0, 0.35);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 120ms ease, opacity 160ms ease;
}

.chat__enviar svg {
  width: 44%;
  height: 44%;
  fill: var(--chat-blanco);
}

.chat__enviar:active { transform: scale(0.94); }

.chat__enviar:disabled {
  opacity: 0.35;
  box-shadow: none;
  cursor: default;
}

/* Etiqueta sólo para lectores de pantalla (el campo no lleva label visible). */
.chat__label-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -------------------------------------------------------------- vitrina */

/*
  Vitrina de juegos: barra lateral anclada al borde izquierdo y centrada a lo
  alto —la derecha es de Ceneritto—. Está siempre —con el chat abierto o cerrado— porque es el gancho:
  enseña qué se gana quien se registre. Mirar es libre; tocar una tarjeta
  lleva al juego si el visitante ya se registró, y al chat si no (ver
  js/chat-registro.js).
*/
.juegos {
  /*
    Columna de borde a borde, pegada al lado izquierdo: deja de ser una
    tarjeta flotante y pasa a ser una pared del tótem. El contenido se apoya
    ARRIBA (`justify-content: flex-start`, con las tarjetas a su alto propio)
    y, si la pantalla es baja y los tres juegos no caben, la columna se
    desplaza sola en vez de recortarlos.
  */
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  height: 100dvh;
  width: var(--juegos-ancho);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  overflow-y: auto;

  padding: 24px 14px;
  /* Sólo el lado que da a la pantalla: el izquierdo muere contra el borde. */
  border-right: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0 24px 24px 0;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}

.juegos__titulo {
  margin: 0;
  text-align: center;
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 600;
}

.juegos__subtitulo {
  margin: 0 0 4px;
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
}

.juegos__lista {
  /* Las tarjetas conservan su alto: la columna no las estira para rellenar. */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.juego {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.10);
  color: #FFFFFF;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease;
}

.juego:active {
  transform: scale(0.97);
  background: rgba(255, 107, 0, 0.35);
}

.juego__media {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}

.juego__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.juego__nombre {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}

/* Un juego que todavía no está: se muestra, se lee apagado y no es tocable. */
.juego--proximamente {
  opacity: 0.55;
  cursor: default;
}

.juego__cartel {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2px 0;
  background: rgba(0, 0, 0, 0.72);
  color: #FFFFFF;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-align: center;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- redes */

/*
  Pie de página de verdad: anclado al borde inferior de la pantalla, no
  colgando debajo del chat. Así queda siempre en el mismo sitio —abra o no
  abra el chat— y el visitante lo encuentra donde espera encontrarlo.
*/
.redes {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2vmin;
  /*
    Mismo sangrado que .chat: el pie se centra en el mismo hueco que el chat
    —la vitrina a la izquierda y la franja vacía a la derecha—, no en la
    pantalla entera. Así queda en el mismo eje que Ceneritto y el botón de
    registro (los tres a plomo). En pantalla angosta los dos anchos valen 0px
    y la cuenta se convierte sola en el centrado de siempre.
  */
  padding-left: calc(3vmin + var(--juegos-ancho));
  padding-right: calc(3vmin + var(--margen-derecho));
  display: flex;
  gap: 20px;
  justify-content: center;
}

/*
  Cada red va en su propio color de marca sobre un disco, no en blanco
  translúcido: a la distancia a la que se mira un tótem, el color es lo que
  hace reconocible el icono antes de que se distinga la silueta.
*/
.redes__link {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--red-color, rgba(255, 255, 255, 0.12));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform 160ms ease, filter 160ms ease;
}

.redes__link svg {
  width: 34px;
  height: 34px;
  /* El glifo va en blanco; el color lo pone el disco de detrás. */
  fill: #FFFFFF;
}

.redes__link:active {
  transform: scale(0.94);
  filter: brightness(1.15);
}

.redes__link--facebook { --red-color: #1877F2; }
.redes__link--linkedin { --red-color: #0A66C2; }
.redes__link--youtube  { --red-color: #FF0000; }

/* Instagram no tiene un color, tiene el degradado de su logo. */
.redes__link--instagram {
  --red-color: radial-gradient(circle at 30% 107%,
    #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
}

/*
  Pantalla angosta: no cabe una barra lateral sin estrangular el chat, así que
  la vitrina baja al flujo como una tira horizontal debajo del saludo. Con el
  chat abierto se quita del todo: ahí lo que importa es poder escribir.
*/
@media (max-width: 900px) {
  :root {
    --juegos-ancho: 0px;
    --margen-derecho: 0px;
  }

  /*
    En una sola columna no hay "derecha": lo que había en la esquina vuelve al
    centro, apilado, y el globo con él.
  */
  .chat { align-items: center; justify-content: center; }
  /*
    Aquí la vitrina vuelve al flujo, debajo del saludo: si el bloque se
    quedara los márgenes automáticos empujaría la tira de juegos fuera de la
    pantalla. Centra la columna entera el `justify-content` de .chat.
  */
  .chat__bienvenida {
    align-items: center;
    margin-block: 0;
    transform: none;
  }
  .chat__ventana:not([hidden]) ~ .juegos { display: none; }

  .juegos {
    position: static;
    height: auto;
    overflow-y: visible;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 24px;
    padding: 16px 14px;
    width: min(100%, 560px);
  }

  .juegos__lista { flex-direction: row; }

  .juego {
    flex: 1 1 0;
    flex-direction: column;
    text-align: center;
    gap: 6px;
  }
}

/*
  Pantalla baja (teclado táctil abierto en un equipo apaisado): las redes son
  lo primero que sobra; lo que no puede perderse es el compositor. Sólo se
  quitan mientras el chat está abierto: con la ventana cerrada hay sitio de
  sobra y son lo único que enlaza fuera.
*/
@media (max-height: 620px) {
  .chat__ventana:not([hidden]) ~ .redes { display: none; }

  /*
    Sin franja reservada: con el chat abierto no hay pie que reservar, y con
    el chat cerrado lo que queda arriba (globo + botón) es tan bajo que el pie
    anclado no llega a pisarlo.
  */
  :root {
    --redes-alto: 0px;
    --chat-alto: calc(100dvh - 3vmin);
  }
}

/* Quien haya pedido menos movimiento al SO no ve entrar los mensajes. */
@media (prefers-reduced-motion: reduce) {
  .msg { animation: none; }
  .msg__puntos i { animation: none; }
  .chat__hilo { scroll-behavior: auto; }
}

/* ============================================================== aura viva

  El chat no se queda quieto: un halo naranja recorre el contorno de la
  ventana como si fuera una luz girando dentro del marco, y cada dos vueltas
  el marco se apaga a negro antes de volver a encenderse. Es lo mismo que hace
  el campo de texto, para que la ventana y el compositor respiren a la vez.

  El ángulo se anima como propiedad registrada (@property): sin registrarlo el
  navegador no sabe interpolar un <angle> dentro de un conic-gradient y el giro
  no ocurriría. Donde @property no exista el gradiente se queda fijo y sólo se
  ve el apagón: se degrada sin romperse.
*/
@property --chat-giro {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes chat-giro {
  to { --chat-giro: 360deg; }
}

/*
  El apagón: durante media vuelta el marco baja a negro (brightness casi cero
  apaga el naranja y deja el contorno oscuro) y luego se reenciende.
*/
@keyframes chat-apagon {
  0%, 40%   { filter: none; }
  55%, 72%  { filter: brightness(0.12) saturate(0.2); }
  88%, 100% { filter: none; }
}

.chat__ventana {
  position: relative;   /* Ancla del marco animado. */
}

/*
  El marco es un pseudo-elemento con la máscara clásica de "anillo": se pinta
  todo el rectángulo y se recorta el centro (mask-composite), de modo que sólo
  queda una banda del grosor del padding siguiendo el borde redondeado.
*/
.chat__ventana::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;             /* Por encima de cabecera e hilo. */
  pointer-events: none;   /* Nunca roba toques al chat. */
  border-radius: inherit;

  background: conic-gradient(
    from var(--chat-giro),
    rgba(0, 0, 0, 0.85) 0deg,
    rgba(0, 0, 0, 0.85) 190deg,
    var(--chat-naranja-oscuro) 265deg,
    var(--chat-naranja) 300deg,
    #FFC489 320deg,                 /* Punto más caliente de la luz. */
    var(--chat-naranja) 340deg,
    rgba(0, 0, 0, 0.85) 360deg
  );

  padding: 2px;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;

  animation:
    chat-giro 4s linear infinite,
    chat-apagon 8s ease-in-out infinite;
}

/*
  El campo de texto no admite pseudo-elementos (es un <input>), así que su
  contorno se anima directamente: el borde y el resplandor pasan de naranja
  encendido a negro en el mismo ciclo de 8s que el marco de la ventana.
*/
@keyframes chat-borde-vivo {
  0%, 30% {
    border-color: var(--chat-naranja);
    box-shadow: 0 0 18px rgba(255, 107, 0, 0.45);
  }
  50%, 68% {
    border-color: rgba(0, 0, 0, 0.75);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
  }
  90%, 100% {
    border-color: var(--chat-naranja);
    box-shadow: 0 0 18px rgba(255, 107, 0, 0.45);
  }
}

.chat__input {
  animation: chat-borde-vivo 8s ease-in-out infinite;
}

/* Con el foco puesto el campo deja de parpadear: escribir manda. */
.chat__input:focus {
  animation: none;
  box-shadow: 0 0 20px rgba(255, 107, 0, 0.5);
}

.chat__input:disabled {
  animation: none;
}

/*
  Accesibilidad: si el sistema pide menos movimiento, se congela el giro y el
  parpadeo y queda el contorno naranja fijo.
*/
@media (prefers-reduced-motion: reduce) {
  .chat__ventana::after,
  .chat__input {
    animation: none;
  }

  .chat__ventana::after {
    background: var(--chat-naranja);
    opacity: 0.5;
  }

  .chat__input {
    border-color: var(--chat-naranja);
  }
}