/* ─────────────────────────────────────────────────────────────
   ESTILOS DEL CHAT
   Los colores están definidos una sola vez como "variables" en
   :root. Para cambiar la paleta, se tocan solo esas líneas.
   ───────────────────────────────────────────────────────────── */
:root {
  --azul: #1f3864;          /* color institucional */
  --azul-claro: #e8edf6;    /* fondo de los botones */
  --fondo: #f3f4f7;         /* fondo del área de mensajes */
  --blanco: #ffffff;
  --texto: #1d2433;
  --texto-suave: #5b6475;
  --aviso: #fff4d6;         /* fondo de los mensajes de error */
  --borde: #d9dde6;
  --radio: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #dfe3ea;
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
}

/* La "ventana" del chat: ocupa toda la pantalla en el celular
   y se centra como una tarjeta en la compu. */
.chat {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 720px;
  margin: 0 auto;
  background: var(--fondo);
}
@media (min-width: 760px) {
  .chat {
    height: calc(100dvh - 48px);
    margin: 24px auto;
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  }
}

/* ── Encabezado ── */
.chat__encabezado {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--azul);
  color: var(--blanco);
}
.chat__encabezado h1 { margin: 0; font-size: 1.1rem; }
.chat__encabezado p { margin: 2px 0 0; font-size: 0.8rem; opacity: 0.85; }
.avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  object-fit: contain;        /* la imagen entra entera, sin deformarse */
}

/* ── Área de mensajes ── */
.chat__mensajes {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.burbuja {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: var(--radio);
  line-height: 1.45;
  white-space: pre-line;      /* respeta los \n de los JSON */
  overflow-wrap: anywhere;    /* corta los links largos */
}
.burbuja--bot {
  align-self: flex-start;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-bottom-left-radius: 4px;
}
.burbuja--usuario {
  align-self: flex-end;
  background: var(--azul);
  color: var(--blanco);
  border-bottom-right-radius: 4px;
}
.burbuja--aviso {
  align-self: flex-start;
  background: var(--aviso);
  border: 1px solid #f0d78c;
  font-size: 0.92rem;
}
.burbuja a { color: inherit; font-weight: 600; }

/* ── Botones de opciones ── */
.botones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 85%;
}
.botones button {
  padding: 8px 14px;
  border: 1px solid var(--azul);
  border-radius: 999px;
  background: var(--azul-claro);
  color: var(--azul);
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
}
.botones button:hover:not(:disabled) { background: var(--azul); color: var(--blanco); }
.botones button.secundario { background: var(--blanco); border-color: var(--borde); color: var(--texto-suave); }
.botones button:disabled { opacity: 0.45; cursor: default; }

/* "Escribiendo..." mientras espera la respuesta */
.escribiendo { color: var(--texto-suave); font-style: italic; font-size: 0.9rem; }