@charset "UTF-8";
.chat-box {
  height:400px;
  overflow-y:auto;
  border:1px solid #ccc;
  padding:10px;
}

/* Contenedor general */
#chat-mensajes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  max-height: 400px; /* ajusta según tu modal */
  overflow-y: auto;
  background-color: #f0f0f0;
}

/* Estilo base de cada mensaje */
.mensaje {
  max-width: 70%;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.4;
  display: inline-block;
  position: relative;
}

/* Mensajes propios (enviados) */
.mensaje.propio {
  align-self: flex-end;
  background-color: #d1f7c4; /* verde claro tipo WhatsApp */
  border-bottom-right-radius: 0;
}

/* Mensajes ajenos (recibidos) */
.mensaje.ajeno {
  align-self: flex-start;
  background-color: #ffffff;
  border-bottom-left-radius: 0;
}

.mensaje .texto {
  margin-bottom: 4px;
  word-wrap: break-word;
  white-space: pre-line;
}

.mensaje .media {
  margin-bottom: 4px;
}

/* Hora en pequeñito */
.mensaje .hora {
  font-size: 11px;
  color: #555;
  text-align: right;
}

.mensaje.unread {
  border: 2px solid #4CAF50; /* resalta mensaje no leído */
}

.mensaje-imagen {
  max-width: 350px;
  max-height: 350px;
  border-radius: 8px;
  cursor: pointer;
  object-fit: cover;
}

#contenedor-servicios-asociados {
  max-height:750px;
  min-height: 300px;
  overflow-y:auto;
}

#contenedor-servicios-asociados .servicio-select.active {
  background-color: #28a745;
  color: #fff;
  border-color: #28a745;
}

#contenedor-servicios-asociados .servicio-select {
  width: 100%;
}

#contenedor-servicios-asociados h5 {
  font-weight: 700;
  margin-bottom: 15px;
  border-bottom: 2px solid #000000;
  padding-bottom: 5px;
  text-align: center;
}

#contenedor-servicios-asociados .servicio-item {
  margin-bottom: 10px;
}

.estado-icono {
  margin-left: 4px;
  font-size: 12px;
}

.estado-queued::before {
  content: "⏳";
  color: gray;
}

.estado-sent::before {
  content: "✓";
  color: gray;
}

.estado-delivered::before {
  content: "✓✓";
  color: gray;
}

.estado-read::before {
  content: "✓✓";
  color: #34b7f1; /* Azul WhatsApp */
}

.estado-failed::before {
  content: "❌";
  color: red;
}

.estado-undelivered::before {
  content: "⚠️";
  color: orange;
}

#imageModal {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  text-align:center;
}

#imageModalImg {
  max-width: 90%;
  max-height: 90%;
  margin-top:1%;
  border-radius: 8px;
}

#observaciones-whatsapp {
  display: none;
}

#bt-mostrar-observaciones-whatsapp {
  margin-bottom: 10px;
}

#form-observaciones-whatsapp textarea {
  width: 100%;
  resize: vertical;
  margin-bottom: 15px;
}

.whatsapp-marcar-acciones {
  margin: 0;
  padding: 0;
  margin-bottom: 15px;
}

.whatsapp-marcar-acciones .btn {
  width: 100%;
  border-radius: 0;
}