/* ============================================================
   RUOT · Local Tours — globito de chat (30-sep-2026)
   Pieza aislada del resto de la web: todo va prefijado .chatw- y
   se apoya solo en los tokens de tokens.css (nada de hex sueltos,
   salvo la sombra — el mismo patrón que .widget-panel).
   Coloca el globito ENCIMA del botón del panel de neurodiversidad
   (que vive en right/bottom: var(--sp-5), 56px de alto).
   ============================================================ */

/* — Burbuja (cerrado) — */
/* (30-sep, tarde·6) Un 25 % más pequeña a petición de Ale: el CÍRCULO se ve a
   42 px, pero la caja del botón se queda en 44×44 para no bajar del objetivo
   táctil de la casa (44 px en los dos ejes). El círculo va en ::before. */
.chatw-burbuja {
  position: fixed;
  right: var(--sp-5);
  bottom: calc(var(--sp-5) + 68px);
  z-index: 260;
  width: 44px;
  height: 44px;
  padding: 1px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c-blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chatw-burbuja::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background: var(--cta-primario);
  box-shadow: 0 6px 20px rgba(0, 49, 58, .3);
}
.chatw-burbuja svg { position: relative; width: 20px; height: 20px; }
:root[data-tema="oscuro"] .chatw-burbuja { color: var(--c-petroleo); } /* ~5:1 sobre el ámbar del CTA oscuro */

/* — Panel (abierto) — */
.chatw-panel {
  position: fixed;
  right: var(--sp-5);
  bottom: calc(var(--sp-5) + 124px);
  z-index: 310;
  width: min(370px, calc(100vw - 3rem));
  height: min(540px, calc(100dvh - 230px));
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  box-shadow: 0 12px 40px rgba(0, 49, 58, .22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: var(--fs-small);
}
.chatw-panel[hidden] { display: none; }

.chatw-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--separador);
}
.chatw-titulo {
  margin: 0;
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--texto);
}
.chatw-cerrar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--radio-s);
  color: var(--texto);
  cursor: pointer;
}
.chatw-cerrar:hover { background: var(--tinte); }
.chatw-cerrar svg { width: 22px; height: 22px; }

.chatw-log {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.chatw-msg {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--radio-m);
  max-width: 85%;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chatw-msg-bot {
  background: var(--tinte);
  color: var(--texto);
  align-self: flex-start;
}
.chatw-msg-yo {
  background: var(--cta-primario);
  color: var(--c-blanco);
  align-self: flex-end;
}
:root[data-tema="oscuro"] .chatw-msg-yo { color: var(--c-petroleo); }
.chatw-esperando { color: var(--texto-suave); }

.chatw-pie {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--separador);
}
.chatw-campo {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
  font-family: inherit;
  font-size: var(--fs-small);
}
.chatw-campo::placeholder { color: var(--texto-suave); }
.chatw-enviar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cta-primario);
  color: var(--c-blanco);
  border: 0;
  border-radius: var(--radio);
  cursor: pointer;
}
.chatw-enviar:not(:disabled):hover { background: var(--cta-primario-hover); }
.chatw-enviar:disabled { background: var(--deshabilitado); cursor: default; }
.chatw-enviar svg { width: 20px; height: 20px; }
:root[data-tema="oscuro"] .chatw-enviar { color: var(--c-petroleo); }

/* Nunca en impresión */
@media print {
  .chatw-burbuja, .chatw-panel { display: none !important; }
}