/* Chat con Dulce: usa los colores y tipografías de la página (variables de index.html) */

.chat-boton {
  position: fixed; right: 20px; bottom: 20px; z-index: 1000;
  display: flex; align-items: center; gap: 8px;
  background: var(--rosa); color: var(--blanco);
  border: none; border-radius: 999px; padding: 14px 20px;
  font-family: var(--fuente-texto); font-size: 1rem; font-weight: 700;
  box-shadow: 0 6px 20px rgba(74, 44, 42, .25);
  cursor: pointer;
}
.chat-boton:hover { background: var(--rosa-oscuro); }
.chat-boton[hidden] { display: none; }

.chat-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 1001;
  width: 370px; height: min(580px, calc(100vh - 40px));
  display: flex; flex-direction: column;
  background: var(--crema); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: 0 12px 40px rgba(74, 44, 42, .25);
  overflow: hidden;
  font-family: var(--fuente-texto); color: var(--texto);
}
.chat-panel[hidden] { display: none; }

.chat-cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--cacao); color: var(--crema); padding: 14px 16px;
}
.chat-cabecera strong { font-family: var(--fuente-titulos); font-size: 1.1rem; display: block; }
.chat-cabecera span { font-size: .85rem; opacity: .85; }
.chat-cerrar {
  background: none; border: none; color: var(--crema);
  font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 4px 8px;
}

.chat-mensajes {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.chat-msj {
  max-width: 85%; padding: 10px 14px; border-radius: 14px;
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: .95rem; line-height: 1.45;
}
.chat-msj.dulce { align-self: flex-start; background: var(--blanco); border: 1px solid var(--borde); border-bottom-left-radius: 4px; }
.chat-msj.cliente { align-self: flex-end; background: var(--rosa); color: var(--blanco); border-bottom-right-radius: 4px; }
.chat-msj.escribiendo { color: var(--texto-suave); font-style: italic; }

.chat-sugerencias { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.chat-sugerencias button {
  background: var(--rosa-suave); color: var(--cacao);
  border: 1px solid var(--borde); border-radius: 999px; padding: 8px 14px;
  font-family: var(--fuente-texto); font-size: .9rem; font-weight: 600; text-align: left;
  cursor: pointer;
}
.chat-sugerencias button:hover { border-color: var(--rosa); }

.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--borde); background: var(--blanco); }
.chat-form input {
  flex: 1; min-width: 0;
  border: 1px solid var(--borde); border-radius: 999px; padding: 10px 14px;
  font-family: var(--fuente-texto); font-size: 16px; color: var(--texto); background: var(--crema);
}
.chat-form input:focus { outline: 2px solid var(--rosa); outline-offset: 1px; }
.chat-form button {
  background: var(--rosa); color: var(--blanco); border: none; border-radius: 999px;
  padding: 10px 16px; font-family: var(--fuente-texto); font-weight: 700; cursor: pointer;
}
.chat-form button:disabled { opacity: .6; cursor: default; }

/* Celular: el chat ocupa toda la pantalla */
@media (max-width: 520px) {
  .chat-boton { right: 16px; bottom: 16px; }
  .chat-panel { inset: 0; width: 100%; height: 100%; height: 100dvh; border-radius: 0; border: none; }
}